[tests-only][full-ci] Replace page.waitForSelector with locator.waitF…

…or (#9120)

* replace page.waitForSelector with locator.waitFor

* remove unnecessary element wait

* fix context menu item selector

* fix resource check

* fix flaky edit share role test

tests/e2e/cucumber/steps/ui/session.ts

@@ -22,7 +22,7 @@ async function LogInUser(this: World, stepUser: string): Promise<void> {
 
   await page.goto(config.frontendUrl)
   await sessionObject.login({ user })
-  await page.waitForSelector('#web')
+  await page.locator('#web').waitFor()
 }
 
 Given('{string} has logged in', LogInUser)
@@ -51,7 +51,7 @@ Then('{string} fails to log in', async function (this: World, stepUser: string):
   await page.locator('#oc-login-username').fill(user.id)
   await page.locator('#oc-login-password').fill(user.password)
   await page.locator('button[type="submit"]').click()
-  await page.waitForSelector('#oc-login-error-message')
+  await page.locator('#oc-login-error-message').waitFor()
 })
 
 When(
@@ -61,6 +61,6 @@ When(
     const { page } = this.actorsEnvironment.getActor({ key: stepUser })
     const user = this.usersEnvironment.getUser({ key: stepUser })
     await sessionObject.login({ user })
-    await page.waitForSelector('#web')
+    await page.locator('#web').waitFor()
   }
 )

tests/e2e/support/objects/app-admin-settings/general/actions.ts

@@ -7,7 +7,7 @@ export const uploadLogo = async (path, page): Promise<void> => {
   const logoInput = await page.locator('#logo-upload-input')
   await logoInput.setInputFiles(path)
 
-  await page.waitForSelector('.oc-notification-message')
+  await page.locator('.oc-notification-message').waitFor()
   await page.reload()
   const logoImg = await page.locator('.logo-wrapper img')
   const logoSrc = await logoImg.getAttribute('src')
@@ -21,7 +21,7 @@ export const resetLogo = async (page): Promise<void> => {
 
   await page.click('.oc-general-actions-reset-logo-trigger')
 
-  await page.waitForSelector('.oc-notification-message')
+  await page.locator('.oc-notification-message').waitFor()
   await page.reload()
 
   const imgAfter = await page.locator('.logo-wrapper img')

tests/e2e/support/objects/app-admin-settings/page/general.ts

@@ -9,6 +9,6 @@ export class General {
 
   async navigate(): Promise<void> {
     await this.#page.locator('//a[@data-nav-name="admin-settings-general"]').click()
-    await this.#page.waitForSelector('#app-loading-spinner', { state: 'detached' })
+    await this.#page.locator('#app-loading-spinner').waitFor({ state: 'detached' })
   }
 }

tests/e2e/support/objects/app-admin-settings/page/groups.ts

@@ -11,6 +11,6 @@ export class Groups {
 
   async navigate(): Promise<void> {
     await this.#page.locator(groupsNavSelector).click()
-    await this.#page.waitForSelector(appLoadingSpinnerSelector, { state: 'detached' })
+    await this.#page.locator(appLoadingSpinnerSelector).waitFor({ state: 'detached' })
   }
 }

tests/e2e/support/objects/app-admin-settings/page/spaces.ts

@@ -9,6 +9,6 @@ export class Spaces {
 
   async navigate(): Promise<void> {
     await this.#page.locator('//a[@data-nav-name="admin-settings-spaces"]').click()
-    await this.#page.waitForSelector('#app-loading-spinner', { state: 'detached' })
+    await this.#page.locator('#app-loading-spinner').waitFor({ state: 'detached' })
   }
 }

tests/e2e/support/objects/app-admin-settings/page/users.ts

@@ -11,6 +11,6 @@ export class Users {
 
   async navigate(): Promise<void> {
     await this.#page.locator(usersNavSelector).click()
-    await this.#page.waitForSelector(appLoadingSpinnerSelector, { state: 'detached' })
+    await this.#page.locator(appLoadingSpinnerSelector).waitFor({ state: 'detached' })
   }
 }

tests/e2e/support/objects/app-admin-settings/spaces/actions.ts

@@ -48,31 +48,30 @@ const performAction = async (args: {
     await page.locator(util.format(contextMenuSelector, id)).click()
   }
 
-  let contextMenuActionButtonSelector = null
+  let contextMenuActionButtonSelector = `.${context} `
   switch (action) {
     case 'rename':
-      contextMenuActionButtonSelector = util.format(contextMenuActionButton, action)
+      contextMenuActionButtonSelector += util.format(contextMenuActionButton, action)
       break
     case 'edit-description':
-      contextMenuActionButtonSelector = util.format(contextMenuActionButton, action)
+      contextMenuActionButtonSelector += util.format(contextMenuActionButton, action)
       break
     case 'edit-quota':
-      contextMenuActionButtonSelector = util.format(contextMenuActionButton, action)
+      contextMenuActionButtonSelector += util.format(contextMenuActionButton, action)
       break
     case 'delete':
-      contextMenuActionButtonSelector = util.format(contextMenuActionButton, action)
+      contextMenuActionButtonSelector += util.format(contextMenuActionButton, action)
       break
     case 'disable':
-      contextMenuActionButtonSelector = util.format(contextMenuActionButton, action)
+      contextMenuActionButtonSelector += util.format(contextMenuActionButton, action)
       break
     case 'restore':
-      contextMenuActionButtonSelector = util.format(contextMenuActionButton, action)
+      contextMenuActionButtonSelector += util.format(contextMenuActionButton, action)
       break
     default:
       throw new Error(`${action} not implemented`)
   }
-  await page.waitForSelector(contextMenuActionButtonSelector)
-  await page.locator(`.${context}`).locator(contextMenuActionButtonSelector).click()
+  await page.locator(contextMenuActionButtonSelector).click()
 }
 
 export const changeSpaceQuota = async (args: {
@@ -86,7 +85,7 @@ export const changeSpaceQuota = async (args: {
 
   const searchLocator = page.locator(spacesQuotaSearchField)
   await searchLocator.fill(value)
-  await page.waitForSelector(selectedQuotaValueField)
+  await page.locator(selectedQuotaValueField).waitFor()
   await page.locator(util.format(quotaValueDropDown, `${value} GB`)).click()
   await confirmAction({
     page,
@@ -214,7 +213,7 @@ const confirmAction = async (args: {
     )
   }
 
-  await page.waitForSelector(confirmButton)
+  await page.locator(confirmButton).waitFor()
   await Promise.all([...checkResponses, page.locator(confirmButton).click()])
 }
 
@@ -252,7 +251,7 @@ export const listSpaceMembers = async (args: {
   filter: string
 }): Promise<Array<string>> => {
   const { page, filter } = args
-  await page.waitForSelector(spaceMembersDiv)
+  await page.locator(spaceMembersDiv).waitFor()
   let users = []
   const names = []
   switch (filter) {

tests/e2e/support/objects/app-admin-settings/users/actions.ts

@@ -75,9 +75,9 @@ export const changeAccountEnabled = async (args: {
   value: boolean
 }): Promise<void> => {
   const { page, value, uuid } = args
-  await page.waitForSelector(loginInput)
+  await page.locator(loginInput).waitFor()
   await page.locator(loginInput).click()
-  await page.waitForSelector(loginDropDown)
+  await page.locator(loginDropDown).waitFor()
 
   await page
     .locator(dropdownOption)
@@ -143,7 +143,7 @@ export const changeQuotaUsingBatchAction = async (args: {
 export const getDisplayedUsers = async (args: { page: Page }): Promise<string[]> => {
   const { page } = args
   const users = []
-  await page.waitForSelector(usersTable)
+  await page.locator(usersTable).waitFor()
   const result = page.locator(userTrSelector)
 
   const count = await result.count()
@@ -424,7 +424,7 @@ export const deleteUserUsingBatchAction = async (args: {
 
 export const waitForEditPanelToBeVisible = async (args: { page: Page }): Promise<void> => {
   const { page } = args
-  await page.waitForSelector(editPanel)
+  await page.locator(editPanel).waitFor()
 }
 
 const getGroupId = (group: string): string => {

tests/e2e/support/objects/app-files/link/actions.ts

@@ -103,8 +103,8 @@ export const createLink = async (args: createLinkArgs): Promise<string> => {
 }
 
 export const waitForPopupNotPresent = async (page): Promise<void> => {
-  await page.waitForSelector(linkUpdateDialog)
-  await page.waitForSelector(linkUpdateDialog, { state: 'detached', strict: false })
+  await page.locator(linkUpdateDialog).waitFor()
+  await page.locator(linkUpdateDialog).waitFor({ state: 'detached' })
 }
 
 export const changeRole = async (args: changeRoleArgs): Promise<string> => {
@@ -118,7 +118,17 @@ export const changeRole = async (args: changeRoleArgs): Promise<string> => {
   await sidebar.open({ page: page, resource: resourceName })
   await sidebar.openPanel({ page: page, name: 'sharing' })
   await page.locator(util.format(publicLinkEditRoleButton, linkName)).click()
-  await page.locator(util.format(publicLinkSetRoleButton, role.toLowerCase())).click()
+
+  await Promise.all([
+    page.waitForResponse(
+      (res) =>
+        res.url().includes('api/v1/shares/') &&
+        res.request().method() === 'PUT' &&
+        res.status() === 200
+    ),
+    page.locator(util.format(publicLinkSetRoleButton, role.toLowerCase())).click()
+  ])
+
   const message = await page.locator(linkUpdateDialog).textContent()
   expect(message.trim()).toBe('Link was updated successfully')
   return await page.locator(publicLinkCurrentRole).textContent()

tests/e2e/support/objects/app-files/page/public.ts

@@ -24,17 +24,19 @@ export class Public {
   async authenticate({ password }: { password: string }): Promise<void> {
     await this.#page.locator(passwordInput).fill(password)
     await this.#page.locator(publicLinkAuthorizeButton).click()
-    await this.#page.waitForSelector('#web-content')
+    await this.#page.locator('#web-content').waitFor()
   }
 
   async dropUpload({ resources }: { resources: File[] }): Promise<void> {
     const startUrl = this.#page.url()
     await this.#page.locator(fileUploadInput).setInputFiles(resources.map((file) => file.path))
     const names = resources.map((file) => path.basename(file.name))
-    await this.#page.waitForSelector(uploadInfoSuccessLabelSelector)
+    await this.#page.locator(uploadInfoSuccessLabelSelector).waitFor()
     await this.#page.locator(toggleUploadDetailsButton).click()
     await Promise.all(
-      names.map((name) => this.#page.waitForSelector(util.format(dropUploadResourceSelector, name)))
+      names.map((name) =>
+        this.#page.locator(util.format(dropUploadResourceSelector, name)).waitFor()
+      )
     )
     await this.#page.goto(startUrl)
   }

tests/e2e/support/objects/app-files/page/shares/withMe.ts

@@ -21,7 +21,7 @@ export class WithMe {
       this.#page.waitForEvent('popup'),
       this.#page.locator(openShareWithMeButton).click()
     ])
-    await newTab.waitForSelector(shareWithMeNavSelector)
+    await newTab.locator(shareWithMeNavSelector).waitFor()
     await actor.newPage(newTab)
   }
 }

tests/e2e/support/objects/app-files/page/spaces/projects.ts

@@ -9,6 +9,6 @@ export class Projects {
 
   async navigate(): Promise<void> {
     await this.#page.locator('//a[@data-nav-name="files-spaces-projects"]').click()
-    await this.#page.waitForSelector('#app-loading-spinner', { state: 'detached' })
+    await this.#page.locator('#app-loading-spinner').waitFor({ state: 'detached' })
   }
 }

tests/e2e/support/objects/app-files/page/trashbin/overview.ts

@@ -9,6 +9,6 @@ export class Overview {
 
   async navigate(): Promise<void> {
     await this.#page.locator('//a[@data-nav-name="files-trash-overview"]').click()
-    await this.#page.waitForSelector('#app-loading-spinner', { state: 'detached' })
+    await this.#page.locator('#app-loading-spinner').waitFor({ state: 'detached' })
   }
 }

tests/e2e/support/objects/app-files/resource/actions.ts

@@ -137,7 +137,7 @@ export const createSpaceFromFolder = async ({
     page.locator(util.format(actionConfirmationButton, 'Create')).click()
   ])
 
-  await page.waitForSelector(notificationMessage)
+  await page.locator(notificationMessage).waitFor()
   return (await response.json()) as Space
 }
 
@@ -168,7 +168,7 @@ export const createSpaceFromSelection = async ({
     ),
     page.locator(util.format(actionConfirmationButton, 'Create')).click()
   ])
-  await page.waitForSelector(notificationMessage)
+  await page.locator(notificationMessage).waitFor()
   return (await response.json()) as Space
 }
 
@@ -271,8 +271,7 @@ export const editTextDocument = async ({
     page.locator(saveTextFileInEditorButton).click()
   ])
   await Promise.all([page.waitForNavigation(), page.locator(closeTextEditorOrViewerButton).click()])
-  await page.waitForSelector(util.format(resourceNameSelector, name))
-  await page.waitForSelector(fileRow)
+  await page.locator(util.format(resourceNameSelector, name)).waitFor()
 }
 
 /**/
@@ -866,7 +865,7 @@ export const getTagsForResourceVisibilityInFilesTable = async (
   }
 
   const tagCellSelector = util.format(tagTableCell, resourceName)
-  await page.waitForSelector(tagCellSelector)
+  await page.locator(tagCellSelector).waitFor()
   const resourceTagCell = page.locator(tagCellSelector)
 
   for (const tag of tags) {
@@ -892,7 +891,7 @@ export const clickResourceTag = async (args: clickTagArgs): Promise<void> => {
   }
 
   const tagCellSelector = util.format(tagTableCell, resourceName)
-  await page.waitForSelector(tagCellSelector)
+  await page.locator(tagCellSelector).waitFor()
   const resourceTagCell = page.locator(tagCellSelector)
   const tagSpan = resourceTagCell.locator(util.format(tagInFilesTable, tag))
   return tagSpan.click()
@@ -915,7 +914,7 @@ export const getTagsForResourceVisibilityInDetailsPanel = async (
 
   for (const tag of tags) {
     const tagSelector = util.format(tagInDetailsPanel, tag)
-    await page.waitForSelector(tagSelector)
+    await page.locator(tagSelector).waitFor()
     const tagSpan = page.locator(tagSelector)
     const isVisible = await tagSpan.isVisible()
     if (!isVisible) {
@@ -962,7 +961,7 @@ export const getDisplayedResourcesFromSearch = async (page): Promise<string[]> =
 
 export const getDisplayedResourcesFromFilesList = async (page): Promise<string[]> => {
   const files = []
-  await page.waitForSelector('[data-test-resource-path]')
+  await page.locator('[data-test-resource-path]').first().waitFor()
   const result = await page.locator('[data-test-resource-path]')
 
   const count = await result.count()

tests/e2e/support/objects/app-files/resource/index.ts

@@ -14,7 +14,7 @@ export class Resource {
     const startUrl = this.#page.url()
     await po.createResources({ ...args, page: this.#page })
     await this.#page.goto(startUrl)
-    await this.#page.waitForSelector('#files-view')
+    await this.#page.locator('#files-view').waitFor()
   }
 
   async upload(args: Omit<po.uploadResourceArgs, 'page'>): Promise<void> {

tests/e2e/support/objects/app-files/resource/utils.ts

@@ -20,13 +20,16 @@ export const resourceExists = async ({
   timeout?: number
 }): Promise<boolean> => {
   let exist = true
-  await page.waitForSelector(util.format(resourceNameSelector, name), { timeout }).catch((e) => {
-    if (!(e instanceof errors.TimeoutError)) {
-      throw e
-    }
+  await page
+    .locator(util.format(resourceNameSelector, name))
+    .waitFor({ timeout })
+    .catch((e) => {
+      if (!(e instanceof errors.TimeoutError)) {
+        throw e
+      }
 
-    exist = false
-  })
+      exist = false
+    })
 
   return exist
 }
@@ -39,6 +42,6 @@ export const waitForResources = async ({
   names: string[]
 }): Promise<void> => {
   await Promise.all(
-    names.map((name) => page.waitForSelector(util.format(resourceNameSelector, name)))
+    names.map((name) => page.locator(util.format(resourceNameSelector, name)).waitFor())
   )
 }

tests/e2e/support/objects/app-files/share/collaborator.ts

@@ -98,7 +98,7 @@ export default class Collaborator {
       collaboratorInputLocator.fill(collaborator.id)
     ])
     await collaboratorInputLocator.focus()
-    await page.waitForSelector('.vs--open')
+    await page.locator('.vs--open').waitFor()
     await page.locator('.vs__dropdown-option').click()
   }
 

tests/e2e/support/objects/app-files/share/utils.ts

@@ -46,7 +46,8 @@ export const isAcceptedSharePresent = async ({
 }): Promise<boolean> => {
   let exist = true
   await page
-    .waitForSelector(util.format(acceptedShareItem, resource, owner), { timeout })
+    .locator(util.format(acceptedShareItem, resource, owner))
+    .waitFor({ timeout })
     .catch((e) => {
       if (!(e instanceof errors.TimeoutError)) {
         throw e

tests/e2e/support/objects/app-files/spaces/actions.ts

@@ -171,7 +171,7 @@ export const changeQuota = async (args: {
   await page.locator(editQuotaOptionSelector).click()
   const searchLocator = page.locator(spacesQuotaSearchField)
   await searchLocator.fill(value)
-  await page.waitForSelector(selectedQuotaValueField)
+  await page.locator(selectedQuotaValueField).waitFor()
   await page.locator(util.format(quotaValueDropDown, `${value} GB`)).click()
 
   await Promise.all([