Update selectors to improve CE test stability (#28096)

* Update selectors to improve test stability

* Update selectors to improve test stability

* Use plain string matchers

* Fix test

* [monorepo] use plain string matchers everywhere

* [web] remove Kb/ prefix from title of learn wiki links

---------

Co-authored-by: Jakob Ackermann <jakob.ackermann@overleaf.com>
GitOrigin-RevId: 12e13c39822795338a3bee20236454f9948e6221

server-ce/test/create-and-compile-project.spec.ts

@@ -6,46 +6,59 @@ import {
 import { isExcludedBySharding, startWith } from './helpers/config'
 import { throttledRecompile } from './helpers/compile'
 
+const USER = 'user@example.com'
+const COLLABORATOR = 'collaborator@example.com'
+
 describe('Project creation and compilation', function () {
   if (isExcludedBySharding('CE_DEFAULT')) return
   startWith({})
-  ensureUserExists({ email: 'user@example.com' })
-  ensureUserExists({ email: 'collaborator@example.com' })
+  ensureUserExists({ email: USER })
+  ensureUserExists({ email: COLLABORATOR })
 
   it('users can create project and compile it', function () {
-    login('user@example.com')
+    login(USER)
     createProject('test-project')
     const recompile = throttledRecompile()
-    cy.findByText('\\maketitle').parent().click()
-    cy.findByText('\\maketitle').parent().type('\n\\section{{}Test Section}')
+    cy.findByRole('textbox', { name: 'Source Editor editing' }).within(() => {
+      cy.findByText('\\maketitle').parent().click()
+      cy.findByText('\\maketitle').parent().type('\n\\section{{}Test Section}')
+    })
     recompile()
-    cy.get('.pdf-viewer').should('contain.text', 'Test Section')
+    cy.findByRole('region', { name: 'PDF preview and logs' }).within(() => {
+      cy.findByLabelText(/Page.*1/i).should('be.visible')
+      cy.findByText('Test Section').should('be.visible')
+    })
   })
 
   it('create and edit markdown file', function () {
     const fileName = `test-${Date.now()}.md`
     const markdownContent = '# Markdown title'
-    login('user@example.com')
+    login(USER)
     createProject('test-project')
 
-    // FIXME: Add aria-label maybe? or at least data-test-id
-    cy.findByText('New file').click({ force: true })
+    cy.findByRole('navigation', { name: 'Project files and outline' })
+      .findByRole('button', { name: 'New file' })
+      .click()
     cy.findByRole('dialog').within(() => {
-      cy.get('input').clear()
-      cy.get('input').type(fileName)
-      cy.findByText('Create').click()
+      cy.findByLabelText('File Name').clear().type(fileName)
+      cy.findByRole('button', { name: 'Create' }).click()
     })
-    cy.findByText(fileName).click()
+    cy.findByRole('button', { name: fileName }).click()
     // wait until we've switched to the newly created empty file
-    cy.get('.cm-line').should('have.length', 1)
-    cy.get('.cm-line').type(markdownContent)
-    cy.findByText('main.tex').click()
-    cy.findByRole('textbox', { name: /Source Editor editing/i }).should(
+    cy.findByRole('textbox', { name: 'Source Editor editing' }).should(
+      'have.length',
+      1
+    )
+    cy.findByRole('textbox', { name: 'Source Editor editing' }).type(
+      markdownContent
+    )
+    cy.findByRole('button', { name: 'main.tex' }).click()
+    cy.findByRole('textbox', { name: 'Source Editor editing' }).should(
       'contain.text',
       '\\maketitle'
     )
-    cy.findByText(fileName).click()
-    cy.findByRole('textbox', { name: /Source Editor editing/i }).should(
+    cy.findByRole('button', { name: fileName }).click()
+    cy.findByRole('textbox', { name: 'Source Editor editing' }).should(
       'contain.text',
       markdownContent
     )
@@ -54,7 +67,7 @@ describe('Project creation and compilation', function () {
   it('can link and display linked image from other project', function () {
     const sourceProjectName = `test-project-${Date.now()}`
     const targetProjectName = `${sourceProjectName}-target`
-    login('user@example.com')
+    login(USER)
 
     createProject(sourceProjectName, {
       type: 'Example project',
@@ -63,15 +76,17 @@ describe('Project creation and compilation', function () {
     createProject(targetProjectName)
 
     // link the image from `projectName` into this project
-    cy.findByText('New file').click({ force: true })
+    cy.findByRole('button', { name: 'New file' }).click()
     cy.findByRole('dialog').within(() => {
-      cy.findByText('From another project').click()
+      cy.findByRole('button', { name: 'From another project' }).click()
       cy.findByLabelText('Select a Project').select(sourceProjectName)
       cy.findByLabelText('Select a File').select('frog.jpg')
-      cy.findByText('Create').click()
+      cy.findByRole('button', { name: 'Create' }).click()
     })
-    cy.findByTestId('file-tree').findByText('frog.jpg').click()
-    cy.findByText('Another project')
+    cy.findByRole('navigation', { name: 'Project files and outline' })
+      .findByRole('treeitem', { name: 'frog.jpg' })
+      .click()
+    cy.findByRole('link', { name: 'Another project' })
       .should('have.attr', 'href')
       .then(href => {
         cy.get('@sourceProjectId').then(sourceProjectId => {
@@ -83,7 +98,7 @@ describe('Project creation and compilation', function () {
   it('can refresh linked files as collaborator', function () {
     const sourceProjectName = `test-project-${Date.now()}`
     const targetProjectName = `${sourceProjectName}-target`
-    login('user@example.com')
+    login(USER)
     createProject(sourceProjectName, {
       type: 'Example project',
       open: false,
@@ -91,31 +106,36 @@ describe('Project creation and compilation', function () {
     createProject(targetProjectName).as('targetProjectId')
 
     // link the image from `projectName` into this project
-    cy.findByText('New file').click({ force: true })
+    cy.findByRole('navigation', { name: 'Project files and outline' })
+      .findByRole('button', { name: 'New file' })
+      .click()
+
     cy.findByRole('dialog').within(() => {
-      cy.findByText('From another project').click()
+      cy.findByRole('button', { name: 'From another project' }).click()
       cy.findByLabelText('Select a Project').select(sourceProjectName)
       cy.findByLabelText('Select a File').select('frog.jpg')
-      cy.findByText('Create').click()
+      cy.findByRole('button', { name: 'Create' }).click()
     })
 
-    cy.findByText('Share').click()
+    cy.findByRole('navigation', { name: 'Project actions' }).within(() => {
+      cy.findByRole('button', { name: 'Share' }).click()
+    })
     cy.findByRole('dialog').within(() => {
-      cy.findByTestId('collaborator-email-input').type(
-        'collaborator@example.com,'
-      )
-      cy.findByText('Invite').click({ force: true })
+      cy.findByTestId('collaborator-email-input').type(COLLABORATOR + ',')
+      cy.findByRole('button', { name: 'Invite' }).click()
       cy.findByText('Invite not yet accepted.')
     })
 
-    login('collaborator@example.com')
+    login(COLLABORATOR)
     openProjectViaInviteNotification(targetProjectName)
     cy.get('@targetProjectId').then(targetProjectId => {
       cy.url().should('include', targetProjectId)
     })
 
-    cy.findByTestId('file-tree').findByText('frog.jpg').click()
-    cy.findByText('Another project')
+    cy.findByRole('navigation', { name: 'Project files and outline' })
+      .findByRole('treeitem', { name: 'frog.jpg' })
+      .click()
+    cy.findByRole('link', { name: 'Another project' })
       .should('have.attr', 'href')
       .then(href => {
         cy.get('@sourceProjectId').then(sourceProjectId => {