From 45b5d49f54e424596d47cef4c9a57757b4ed96ef Mon Sep 17 00:00:00 2001
From: Yannick Lang <layaxx@gmx.de>
Date: Tue, 31 Oct 2023 20:57:45 +0100
Subject: [PATCH] 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
---
 .../cypress/e2e/batch-translation.cy.js       | 11 +++++-----
 .../cypress/e2e/direct-translation.cy.js      | 20 +++++++++----------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/playground/cypress/e2e/batch-translation.cy.js b/playground/cypress/e2e/batch-translation.cy.js
index 52568fea..2c05bd5b 100644
--- 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
index 3989e526..a406a731 100644
--- 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()