test(cypress): wait for button to be visibletest/cypress-flaky

Instead of just expecting the button in the DOM.
This causes flaky tests with files-renaming.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

2 files changed, 29 insertions, 17 deletions

diff --git a/cypress/e2e/files/FilesUtils.ts b/cypress/e2e/files/FilesUtils.ts
index a24351bd316..c9d93f49c13 100644
--- a/cypress/e2e/files/FilesUtils.ts
+++ b/cypress/e2e/files/FilesUtils.ts
@@ -36,27 +36,37 @@ const searchForActionInRow = (row: JQuery<HTMLElement>, actionId: string): Cypre
 export const getActionEntryForFileId = (fileid: number, actionId: string): Cypress.Chainable<JQuery<HTMLElement>> => {
 	// If we cannot find the action in the row, it might be in the action menu
 	return getRowForFileId(fileid).should('be.visible')
-		.then(row => searchForActionInRow(row, actionId))
+		.then((row) => searchForActionInRow(row, actionId))
 }
 export const getActionEntryForFile = (filename: string, actionId: string): Cypress.Chainable<JQuery<HTMLElement>> => {
 	// If we cannot find the action in the row, it might be in the action menu
 	return getRowForFile(filename).should('be.visible')
-		.then(row => searchForActionInRow(row, actionId))
+		.then((row) => searchForActionInRow(row, actionId))
 }
 
 export const triggerActionForFileId = (fileid: number, actionId: string) => {
 	// Even if it's inline, we open the action menu to get all actions visible
 	getActionButtonForFileId(fileid).click({ force: true })
+	// wait for the actions menu to be visible
+	cy.findByRole('menu').findAllByRole('menuitem').first().should('be.visible')
 	getActionEntryForFileId(fileid, actionId)
-		.find('button').last()
-		.should('exist').click({ force: true })
+		.find('button').last().as('actionButton')
+		.scrollIntoView()
+	cy.get('@actionButton')
+		.should('be.visible')
+		.click({ force: true })
 }
 export const triggerActionForFile = (filename: string, actionId: string) => {
 	// Even if it's inline, we open the action menu to get all actions visible
 	getActionButtonForFile(filename).click({ force: true })
+	// wait for the actions menu to be visible
+	cy.findByRole('menu').findAllByRole('menuitem').first().should('be.visible')
 	getActionEntryForFile(filename, actionId)
-		.find('button').last()
-		.should('exist').click({ force: true })
+		.find('button').last().as('actionButton')
+		.scrollIntoView()
+	cy.get('@actionButton')
+		.should('be.visible')
+		.click({ force: true })
 }
 
 export const triggerInlineActionForFileId = (fileid: number, actionId: string) => {
diff --git a/cypress/e2e/files/files-renaming.cy.ts b/cypress/e2e/files/files-renaming.cy.ts
index 269f0bd252b..d377417de7b 100644
--- a/cypress/e2e/files/files-renaming.cy.ts
+++ b/cypress/e2e/files/files-renaming.cy.ts
@@ -9,18 +9,20 @@ import { calculateViewportHeight, createFolder, getRowForFile, haveValidity, ren
 describe('files: Rename nodes', { testIsolation: true }, () => {
 	let user: User
 
-	beforeEach(() => cy.createRandomUser().then(($user) => {
-		user = $user
-
-		// remove welcome file
-		cy.rm(user, '/welcome.txt')
-		// create a file called "file.txt"
-		cy.uploadContent(user, new Blob([]), 'text/plain', '/file.txt')
-
-		// login and visit files app
-		cy.login(user)
+	beforeEach(() => {
+		cy.createRandomUser().then(($user) => {
+			user = $user
+
+			// remove welcome file
+			cy.rm(user, '/welcome.txt')
+			// create a file called "file.txt"
+			cy.uploadContent(user, new Blob([]), 'text/plain', '/file.txt')
+
+			// login and visit files app
+			cy.login(user)
+		})
 		cy.visit('/apps/files')
-	}))
+	})
 
 	it('can rename a file', () => {
 		// All are visible by default