impl cy.getByTestid

packages/app/test/cypress/integration/1-install/install.spec.ts

@@ -3,26 +3,26 @@ describe('Installer', () => {
     cy.visit('/'); // change URL to match your dev URL
     cy.screenshot('on-load');
 
-    cy.get('[data-testid=installerForm]').should('be.visible');
+    cy.getByTestid('installerForm').should('be.visible');
   });
 
   it('the dropdown for language works', () => {
-    cy.get('[data-testid=dropdownLanguage]').should('be.visible');
+    cy.getByTestid('dropdownLanguage').should('be.visible');
 
-    cy.get('[data-testid=dropdownLanguage]').click();
+    cy.getByTestid('dropdownLanguage').click();
     cy.screenshot('open-dropdownLanguage');
-    cy.get('[data-testid=dropdownLanguage]').click(); // close
+    cy.getByTestid('dropdownLanguage').click(); // close
 
-    cy.get('[data-testid=dropdownLanguage]').click();
-    cy.get('[data-testid=dropdownLanguageMenu-en_US]').click();
+    cy.getByTestid('dropdownLanguage').click();
+    cy.getByTestid('dropdownLanguageMenu-en_US').click();
     cy.screenshot('select-en_US');
 
-    cy.get('[data-testid=dropdownLanguage]').click();
-    cy.get('[data-testid=dropdownLanguageMenu-ja_JP]').click();
+    cy.getByTestid('dropdownLanguage').click();
+    cy.getByTestid('dropdownLanguageMenu-ja_JP').click();
     cy.screenshot('select-ja_JP');
 
-    cy.get('[data-testid=dropdownLanguage]').click();
-    cy.get('[data-testid=dropdownLanguageMenu-zh_CN]').click();
+    cy.getByTestid('dropdownLanguage').click();
+    cy.getByTestid('dropdownLanguageMenu-zh_CN').click();
     cy.screenshot('select-zh_CN');
   });
 

packages/app/test/cypress/support/commands.ts

@@ -23,3 +23,8 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+
+Cypress.Commands.add('getByTestid', (selector, options?) => {
+  return cy.get(`[data-testid=${selector}]`, options);
+})

packages/app/test/cypress/support/index.ts

@@ -18,3 +18,12 @@ import './commands'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    interface Chainable {
+       getByTestid(selector: string, options?: Partial<Loggable & Timeoutable & Withinable & Shadow>): Chainable<JQuery<Element>>,
+    }
+  }
+}