Playwrigt tests

e2e-tests/common.js

@@ -51,10 +51,11 @@ export const showLoginPage = async (fs, folder, userName, json, file, window, ex
   await expect(welcome).toBe("Welcome!")
   await window.reload()
 }
-export const createUserValidation = async (window, expect) => {
-  await window.getByRole('button', { name: 'Create New Account' }).click()
+export const userValidation = async (window, expect) => {
+  expect(await window.locator('//*[@aria-label="create-new-account"]')).toBeVisible()
+  await window.locator('//*[@aria-label="create-new-account"]').click()
   await expect(window.locator('//input[@placeholder="Username"]')).toBeVisible()
-  await window.getByPlaceholder('Username').fill('jo')
+  await window.locator('//input[@placeholder="Username"]').fill('jo')
   await expect(window.locator('//button[@type="submit"]')).toBeVisible()
   await window.click('[type=submit]');
   const lengthError = await window.locator('//*[@id="show-error"]')
@@ -74,7 +75,7 @@ export const createProjectValidation = async (window, expect) => {
 /* function for creating a project for obs and audio */
 export const createProjects = async (window, expect, projectname, type, description, abb) => {
   await expect(window.locator('//a[@aria-label="new"]')).toBeVisible()
-  await window.getByRole('link', { name: 'new' }).click()
+  await window.locator('//a[@aria-label="new"]').click()
   await expect(window.locator('//button[@aria-label="open-popover"]')).toBeVisible()
   await window.locator('//button[@aria-label="open-popover"]').click()
   await expect(window.locator(`//a[@data-id="${type}"]`)).toBeVisible()
@@ -135,4 +136,221 @@ export const unstarProject = async (window, expect, projectname) => {
   }
   const title = await window.textContent('[aria-label=projects]', { timeout: 10000 });
   expect(title).toBe('Projects');
+}
+
+export const searchProject = async (window, expect, projectName, searchtext) => {
+  await window.waitForTimeout(1000)
+  expect(await window.locator('//input[@id="search_box"]')).toBeVisible()
+  await window.locator('//input[@id="search_box"]').fill(searchtext)
+  const projectname = await window.innerText(`//*[@id="${projectName}"]`);
+  expect(await projectname).toBe(projectName);
+}
+
+export const checkProjectName = async (window, expect, name) => {
+  expect(await window.locator('//*[@id="projects-list"]')).toBeVisible()
+  const table = await window.locator('//*[@id="projects-list"]')
+  const body = await table.locator('//*[@id="projects-list-unstar"]')
+  const rows = await body.locator('tr')
+  for (let i = 0; i < await rows.count(); i++) {
+    const row = await rows.nth(i);
+    const tds = await row.locator('td');
+    if (await tds.nth(1).textContent() === name) {
+      await tds.nth(1).click()
+    }
+  }
+  const editorpane = await window.innerText('[aria-label=editor-pane]', { timeout: 120000 });
+  expect(editorpane).toBe('EDITOR');
+  const projectname = await window.innerText('[aria-label=editor-project-name]');
+  expect(projectname).toBe(name.toUpperCase());
+}
+
+export const checkNotification = async (window, expect) => {
+  await window.locator('//*[@aria-label="notification-button"]').click()
+  const title = await window.innerText('[aria-label=notification-title]');
+  expect(title).toBe('NOTIFICATIONS');
+  await window.locator('//*[@aria-label="close-notification"]').click()
+  const editorpane = await window.innerText('[aria-label=editor-pane]');
+  expect(editorpane).toBe('EDITOR');
+}
+
+export const goToProjectPage = async (window, expect) => {
+  expect(await window.locator('//*[@id="back-button"]')).toBeVisible()
+  await window.locator('//*[@id="back-button"]').click();
+  const title = await window.textContent('[aria-label=projects]', { timeout: 10000 });
+  expect(title).toBe('Projects');
+  await window.waitForTimeout(1000)
+}
+
+export const exportProject = async (window, expect, projectname) => {
+  expect(await window.locator('//*[@id="projects-list"]')).toBeVisible()
+  const table = window.locator('//*[@id="projects-list"]')
+  const body = table.locator('//*[@id="projects-list-unstar"]')
+  const rows = await body.locator('tr')
+  for (let i = 0; i < await rows.count(); i++) {
+    const row = await rows.nth(i);
+    const tds = await row.locator('td');
+    if (await tds.nth(1).textContent() === projectname) {
+      expect(await tds.first().locator('[aria-label=unstar-project]')).toBeVisible()
+      await tds.last().locator('[aria-label=unstar-expand-project]').click()
+      await window.waitForTimeout(1000)
+      await window.locator('.pl-5 > div > div').click()
+      await window.locator('//*[@aria-label="export-project"]').click()
+      await expect(window.locator('input[name="location"]')).toBeVisible()
+      await window.locator('input[name="location"]').fill('/home/bobby/Downloads')
+      await window.locator('//*[@aria-label="project-export"]').click()
+      await window.waitForTimeout(2000)
+      const notifyMe = await window.locator('//*[@id="__next"]/div[2]/div').isVisible()
+      expect(await notifyMe === true)
+      expect(await rows.count()).toBe(4)
+      await window.locator('[aria-label=unstar-arrow-up]').click()
+    }
+  }
+
+}
+
+export const archivedProjects = async (window, expect, projectname) => {
+  await expect(await window.locator('//*[@id="projects-list"]')).toBeVisible()
+  const table = window.locator('//*[@id="projects-list"]')
+  const body = table.locator('//*[@id="projects-list-unstar"]')
+  const rows = await body.locator('tr')
+  for (let i = 0; i < await rows.count(); i++) {
+    const row = await rows.nth(i);
+    const tds = await row.locator('td');
+    if (await tds.nth(1).textContent() === projectname) {
+      expect(await tds.last().locator('[aria-label=unstar-expand-project]')).toBeVisible()
+      await tds.last().locator('[aria-label=unstar-expand-project]').click()
+      await window.waitForTimeout(1000)
+      await window.locator('.pl-5 > div > div').click()
+      await window.locator('//*[@aria-label="archive-project"]').click()
+      expect(await rows.count()).toBe(4)
+      await window.locator('//*[@aria-label="archive-active-button"]').click()
+      const title = await window.locator('//*[@aria-label="projects"]').textContent()
+      expect(await title).toBe("Archived projects")
+      const projectName = await window.innerText(`//div[@id="${projectname}"]`)
+      expect(projectName).toBe(projectname);
+    }
+  }
+  await window.locator('//*[@aria-label="archive-active-button"]').click()
+  const title = await window.textContent('[aria-label=projects]', { timeout: 10000 });
+  expect(title).toBe('Projects');
+}
+
+export const unarchivedProjects = async (window, expect, projectname) => {
+  await window.locator('//*[@aria-label="archive-active-button"]').click()
+  await expect(await window.locator('//*[@id="projects-list"]')).toBeVisible()
+  const table = window.locator('//*[@id="projects-list"]')
+  const body = table.locator('//*[@id="projects-list-unstar"]')
+  const rows = await body.locator('tr')
+  for (let i = 0; i < await rows.count(); i++) {
+    const row = await rows.nth(i);
+    const tds = await row.locator('td');
+    if (await tds.nth(1).textContent() === projectname) {
+      expect(await tds.last().locator('[aria-label=unstar-expand-project]')).toBeVisible()
+      await tds.last().locator('[aria-label=unstar-expand-project]').click()
+      await window.locator('.pl-5 > div > div').click({ timeout: 4000 })
+      await window.locator('//*[@aria-label="archive-project"]').click()
+      await window.waitForTimeout(500)
+      expect(await rows.count()).toBe(0)
+      const title = await window.locator('//*[@aria-label="projects"]').textContent()
+      expect(await title).toBe("Archived projects")
+    }
+  }
+  await window.locator('//*[@aria-label="archive-active-button"]').click()
+  const title = await window.textContent('[aria-label=projects]', { timeout: 10000 });
+  expect(title).toBe('Projects');
+}
+
+export const goToEditProject = async (window, expect, projectName) => {
+  await expect(window.locator('//*[@id="projects-list"]')).toBeVisible()
+  const table = window.locator('//*[@id="projects-list"]')
+  const body = table.locator('//*[@id="projects-list-unstar"]')
+  const rows = await body.locator('tr')
+  for (let i = 0; i < await rows.count(); i++) {
+    const row = rows.nth(i);
+    const tds = row.locator('td');
+    if (await tds.nth(1).textContent() === projectName) {
+      await tds.last().locator('[aria-label=unstar-expand-project]').click()
+      await window.locator('[aria-label=unstar-menu-project]').click()
+      await window.locator('//*[@aria-label="edit-project"]').click()
+      const text = await window.innerText('//*[@id="__next"]/div/div[2]/header/div/div[1]/div/h1')
+      await expect(text).toBe('EDIT PROJECT')
+    }
+  }
+}
+
+export const changeAppLanguage = async (window, expect, fromLanguage, toLanguage) => {
+  expect(await window.locator('//*[@id="user-profile"]')).toBeVisible()
+  await window.locator('//*[@id="user-profile"]').click()
+  expect(await window.locator('//*[@aria-label="user-profile"]')).toBeVisible()
+  await window.locator('//*[@aria-label="user-profile"]').click()
+  await window.getByRole('button', { name: fromLanguage }).click()
+  await window.getByRole('option', { name: toLanguage }).click()
+  expect(await window.locator('//*[@id="save-profile"]')).toBeVisible()
+  await window.locator('//*[@id="save-profile"]').click()
+}
+
+
+
+export const projectTargetLanguage = async (window, expect, projectName, searchLangauge, selectLanguage) => {
+  await goToEditProject(window, expect, projectName)
+  expect(await window.locator('//*[@aria-label="custom-dropdown"]')).toBeVisible()
+  await window.locator('//*[@aria-label="custom-dropdown"]').fill(searchLangauge)
+  await window.locator(`//*[@aria-label="${selectLanguage}"]`).click()
+  await expect(window.locator('//button[@aria-label="save-edit-project"]')).toBeVisible()
+  await window.locator('//button[@aria-label="save-edit-project"]').click()
+  await window.waitForTimeout(2000)
+  expect(await window.locator('//*[@id="projects-list"]')).toBeVisible()
+  const table = window.locator('//*[@id="projects-list"]')
+  const body = table.locator('//*[@id="projects-list-unstar"]')
+  const rows = body.locator('tr')
+  for (let i = 0; i < await rows.count(); i++) {
+    const row = await rows.nth(i);
+    const tds = await row.locator('td');
+    if (await tds.nth(1).textContent() === projectName) {
+      // expecting language
+      expect(await tds.nth(2).textContent()).toBe(selectLanguage)
+    }
+  }
+  const title = await window.textContent('[aria-label=projects]', { timeout: 10000 });
+  expect(title).toBe('Projects');
+}
+
+export const userProfileValidaiton = async (window, expect) => {
+  await expect(window.locator('input[name="given-name"]')).toBeVisible();
+  await window.locator('input[name="given-name"]').fill("b")
+  await expect(window.locator('input[name="family-name"]')).toBeVisible();
+  await window.locator('input[name="family-name"]').fill("k")
+  await expect(window.locator('input[name="email"]')).toBeVisible();
+  await window.locator('input[name="email"]').fill("kumar")
+  await expect(window.locator('input[name="organization"]')).toBeVisible();
+  await window.locator('input[name="organization"]').fill("v")
+  await expect(window.locator('input[name="selectedregion"]')).toBeVisible();
+  await window.locator('input[name="selectedregion"]').fill("I")
+  await window.locator('//*[@id="save-profile"]').click()
+  const firstLastNameError = await window.textContent('//*[@id="__next"]/div[1]/div[2]/div/div[2]/form/div[2]/span')
+  expect(await firstLastNameError).toBe('The input has to be between 2 and 15 characters long')
+  const emailError = await window.textContent('//*[@id="__next"]/div[1]/div[2]/div/div[2]/form/div[3]/span')
+  expect(await emailError).toBe('Email is not valid!')
+  const organizationError = await window.textContent('//*[@id="__next"]/div[1]/div[2]/div/div[2]/form/div[4]/span')
+  expect(await organizationError).toBe('The input has to be between 2 and 30 characters long')
+  const regionError = await window.textContent('//*[@id="__next"]/div[1]/div[2]/div/div[2]/form/div[5]/span')
+  expect(await regionError).toBe('The input has to be between 2 and 15 characters long')
+}
+
+export const signOut = async (window, expect) => {
+  expect(await window.locator('//*[@id="user-profile"]')).toBeVisible()
+  await window.locator('//*[@id="user-profile"]').click()
+  expect(await window.locator('//*[@aria-label="signout"]')).toBeVisible()
+  await window.locator('//*[@aria-label="signout"]').click()
+  await window.waitForTimeout(1000)
+  const welcome = await window.textContent('//*[@id="__next"]/div/div[1]/div/h2')
+  await expect(welcome).toBe("Welcome!")
+
+}
+
+export const showActiveUsers = async (window, expect) => {
+  expect(await window.locator('//*[@id="view-more"]')).toBeVisible()
+  await window.locator('//*[@id="view-more"]').click()
+  const active = await window.locator('//*[@id="active-tab"]').textContent()
+  expect(await active).toBe("Active")
 }

e2e-tests/myFixtures.ts

@@ -1,29 +1,29 @@
-import {test as myTest} from "@playwright/test"
+import { test as myTest } from "@playwright/test"
 
 type myFixture = {
     userName: string
     textProject: string,
     obsProject: string,
     audioProject: string,
-    syncName:string,
-    doorUser:string,
-    doorPassword:string,
-    flavorText:string,
-    flavorObs:string
-    textUnderscore:string,
-    obsUnderscore:string,
-    obsUrduProject:string,
+    syncName: string,
+    doorUser: string,
+    doorPassword: string,
+    flavorText: string,
+    flavorObs: string
+    textUnderscore: string,
+    obsUnderscore: string,
+    obsUrduProject: string,
 }
 const myFixtureTest = myTest.extend<myFixture>({
-    userName : "Playwright user",
+    userName: "Playwright user",
     textProject: "Translation test project",
     obsProject: "Obs test project",
     textUnderscore: "Translation_test_project",
     obsUnderscore: "Obs_test_project",
     audioProject: "Audio test project",
-    syncName:"Sync_Collab_Test",
-    doorUser:"bobby",
-    doorPassword:"Bobby@123",
+    syncName: "Sync_Collab_Test",
+    doorUser: "bobby",
+    doorPassword: "Bobby@123",
     flavorText: "textTranslation",
     flavorObs: "textStories",
     obsUrduProject: "Obs urdu project",

renderer/src/components/EditorPage/ObsEditor/NavigationObs.js

@@ -31,6 +31,7 @@ const SelectFile = ({ openChapter, onChapterSelect }) => (
               onClick={(e) => { onChapterSelect(e, i + 1); }}
               className={styles.select}
               tabIndex={0}
+              aria-label={i+1}
             >
               {i + 1}
             </div>

renderer/src/components/Login/LeftLogin.js

@@ -207,14 +207,15 @@ const LeftLogin = () => {
             <button
               type="button"
               onClick={openModal}
+              id="view-more"
               className={`
                                      ${isOpen ? '' : 'text-opacity-90'
-              } text-white bg-black w-48 text-xs lg:w-72 sm:w-52 py-[12px] flex items-center justify-center text-md font-bold rounded-b-[10px] sm:text-sm`}
+                } text-white bg-black w-48 text-xs lg:w-72 sm:w-52 py-[12px] flex items-center justify-center text-md font-bold rounded-b-[10px] sm:text-sm`}
             >
               View More
             </button>
           </div>
-)}
+        )}
         <Transition
           appear
           show={isOpen}
@@ -247,6 +248,7 @@ const LeftLogin = () => {
                     <Tab.Group onChange={() => setShowArchived((value) => !value)}>
                       <Tab.List className="flex space-x-0 rounded-xl">
                         <Tab
+                          id="active-tab"
                           className={({ selected }) => classNames(
                             'w-full text-md items-center justify-center outline-none font-bold py-4 leading-5 rounded-t-lg',
                             '',
@@ -258,9 +260,10 @@ const LeftLogin = () => {
                           Active
                         </Tab>
                         <Tab
+                          id="archived-tab"
                           className={({ selected }) => classNames(
-                          'w-full text-md items-center justify-center outline-none font-bold py-4 leading-5 rounded-t-lg',
-                          selected
+                            'w-full text-md items-center justify-center outline-none font-bold py-4 leading-5 rounded-t-lg',
+                            selected
                               ? ' text-error  bg-gray-200 '
                               : 'text-gray-400 hover:text-gray-500 border-b bg-white ',
                           )}
@@ -271,7 +274,7 @@ const LeftLogin = () => {
                       </Tab.List>
                       <Tab.Panels>
                         <Tab.Panel className="relative overflow-y-auto h-[60vh] p-5">
-                          <div className="grid grid-cols-2">
+                          <div className="grid grid-cols-2" id="active-tab-content">
                             {sortedUsers.filter(filterUsers).map((user) => (
                               <div className="flex items-center" key={user.username}>
                                 <div
@@ -289,7 +292,7 @@ const LeftLogin = () => {
                                   <TrashIcon className="text-gray-500 h-5 w-5" />
                                 </button>
                               </div>
-                          ))}
+                            ))}
                           </div>
                         </Tab.Panel>
                         <Tab.Panel className="relative overflow-y-auto h-[60vh] p-5 ">
@@ -310,7 +313,7 @@ const LeftLogin = () => {
                                 </button>
 
                               </div>
-                          ))}
+                            ))}
                           </div>
                         </Tab.Panel>
                       </Tab.Panels>
@@ -325,6 +328,7 @@ const LeftLogin = () => {
           <button
             onClick={openAccountModal}
             type="button"
+            aria-label="create-new-account"
             className="mt-16 mb-28  w-48 lg:w-72 sm:w-52 py-3 font-bold uppercase flex items-center text-xs justify-center  text-white bg-primary rounded  shadow sm:text-xs"
           >
             Create New Account
@@ -382,7 +386,7 @@ const LeftLogin = () => {
                       </div>
                       {newOpen && (
                         <span id="show-error" className="text-red-500">{text}</span>
-                        )}
+                      )}
                       <div className="mt-8 flex gap-8 justify-end">
                         <button
                           type="button"