test(e2e): fix false-negative e2e tests

strapi started using ids starting and ending with ":" for some html elements, which caused the cypress query to fail due to invalid expressions. Additionally, the locale select dropdown has a different structure and must thus be queried differently fix #367
Fekide · Oct 31, 2023 · 45b5d49 · 45b5d49
1 parent 6c816f7
commit 45b5d49
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/playground/cypress/e2e/batch-translation.cy.js b/playground/cypress/e2e/batch-translation.cy.js
@@ -25,10 +25,11 @@ describe('batch translation', () => {
       .contains('label', 'Locales')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id)
+        cy.get(`[id='${id}']`)
       })
       .click()
-    cy.get('li[data-strapi-value=en]').click()
+
+    cy.get('div[role=option]').filter(':contains("English (en)")').click()
     cy.get('div[role=dialog] button').filter(':contains("Translate")').click()
 
     // Verify translation finished
@@ -65,15 +66,15 @@ describe('batch translation', () => {
       .contains('label', 'Locales')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id)
+        cy.get(`[id='${id}']`)
       })
       .click()
-    cy.get('li[data-strapi-value=en]').click()
+    cy.get('div[role=option]').filter(':contains("English (en)")').click()
     cy.get('div[role=dialog]')
       .contains('label', 'Auto-Publish')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id)
+        cy.get(`[id='${id}']`)
       })
       .parent()
       .click()

diff --git a/playground/cypress/e2e/direct-translation.cy.js b/playground/cypress/e2e/direct-translation.cy.js
@@ -15,7 +15,7 @@ describe('direct translation', () => {
     cy.contains('label', 'Locales')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id)
+        cy.get(`[id='${id}']`)
       })
       .click()
     cy.contains('German (de)').click()
@@ -29,7 +29,7 @@ describe('direct translation', () => {
     cy.contains('label', 'slug')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id)
+        cy.get(`[id='${id}']`)
       })
       .clear()
       .type('a-bug-is-becoming-a-meme-on-the-internet-1')
@@ -59,7 +59,7 @@ describe('direct translation', () => {
     cy.contains('label', 'Locales')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id)
+        cy.get(`[id='${id}']`)
       })
       .click()
     cy.contains('German (de)').click()
@@ -73,7 +73,7 @@ describe('direct translation', () => {
     cy.contains('label', 'slug')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id)
+        cy.get(`[id='${id}']`)
       })
       .clear()
       .type('tech-1')
@@ -89,7 +89,7 @@ describe('direct translation', () => {
     cy.contains('label', 'Locales')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id)
+        cy.get(`[id='${id}']`)
       })
       .click()
     cy.contains('German (de)').click()
@@ -103,7 +103,7 @@ describe('direct translation', () => {
     cy.contains('label', 'slug')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id)
+        cy.get(`[id='${id}']`)
       })
       .clear()
       .type('a-bug-is-becoming-a-meme-on-the-internet-1')
@@ -132,7 +132,7 @@ describe('direct translation', () => {
     cy.contains('label', 'Locales')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id)
+        cy.get(`[id='${id}']`)
       })
       .click()
     cy.contains('German (de)').click()
@@ -149,13 +149,13 @@ describe('direct translation', () => {
     cy.contains('label', 'metaTitle')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id.replace('.', '\\.'))
+        cy.get(`[id='${id.replace('.', '\\.')}']`)
       })
       .should('have.value', 'My personal Strapi blog')
     cy.contains('label', 'shareImage')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id)
+        cy.get(`[id='${id}']`)
       })
       .get('img')
       .should('be.visible')
@@ -194,7 +194,7 @@ describe('direct translation', () => {
     cy.contains('label', 'Locales')
       .invoke('attr', 'for')
       .then((id) => {
-        cy.get('#' + id)
+        cy.get(`[id='${id}']`)
       })
       .click()
     cy.contains('German (de)').click()