Update register.spec.ts - use Cypress Testing Library (#10566)

* Update register.spec.ts - use Cypress Testing Library

Signed-off-by: Suguru Hirahara <[email protected]>

* findByRole - checkbox

<input type='checkbox'> has implicit ARIA 'checkbox' role

Signed-off-by: Suguru Hirahara <[email protected]>

---------

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

cypress/e2e/register/register.spec.ts

@@ -36,64 +36,70 @@ describe("Registration", () => {
     it("registers an account and lands on the home screen", () => {
         cy.injectAxe();
 
-        cy.get(".mx_ServerPicker_change", { timeout: 15000 }).click();
-        cy.get(".mx_ServerPickerDialog_continue").should("be.visible");
+        cy.findByRole("button", { name: "Edit", timeout: 15000 }).click();
+        cy.findByRole("button", { name: "Continue" }).should("be.visible");
         // Only snapshot the server picker otherwise in the background `matrix.org` may or may not be available
         cy.get(".mx_Dialog").percySnapshotElement("Server Picker", { widths: [516] });
         cy.checkA11y();
 
-        cy.get(".mx_ServerPickerDialog_otherHomeserver").type(homeserver.baseUrl);
-        cy.get(".mx_ServerPickerDialog_continue").click();
+        cy.findByRole("textbox", { name: "Other homeserver" }).type(homeserver.baseUrl);
+        cy.findByRole("button", { name: "Continue" }).click();
         // wait for the dialog to go away
         cy.get(".mx_ServerPickerDialog").should("not.exist");
 
-        cy.get("#mx_RegistrationForm_username").should("be.visible");
+        cy.findByRole("textbox", { name: "Username" }).should("be.visible");
         // Hide the server text as it contains the randomly allocated Homeserver port
         const percyCSS = ".mx_ServerPicker_server { visibility: hidden !important; }";
         cy.percySnapshot("Registration", { percyCSS });
         cy.checkA11y();
 
-        cy.get("#mx_RegistrationForm_username").type("alice");
-        cy.get("#mx_RegistrationForm_password").type("totally a great password");
-        cy.get("#mx_RegistrationForm_passwordConfirm").type("totally a great password");
-        cy.get(".mx_Login_submit").click();
+        cy.findByRole("textbox", { name: "Username" }).type("alice");
+        cy.findByPlaceholderText("Password").type("totally a great password");
+        cy.findByPlaceholderText("Confirm password").type("totally a great password");
+        cy.findByRole("button", { name: "Register" }).click();
 
         cy.get(".mx_RegistrationEmailPromptDialog").should("be.visible");
         cy.percySnapshot("Registration email prompt", { percyCSS });
         cy.checkA11y();
-        cy.get(".mx_RegistrationEmailPromptDialog button.mx_Dialog_primary").click();
+        cy.get(".mx_RegistrationEmailPromptDialog").within(() => {
+            cy.findByRole("button", { name: "Continue" }).click();
+        });
 
         cy.get(".mx_InteractiveAuthEntryComponents_termsPolicy").should("be.visible");
         cy.percySnapshot("Registration terms prompt", { percyCSS });
         cy.checkA11y();
 
-        cy.get(".mx_InteractiveAuthEntryComponents_termsPolicy input").click();
-        cy.get(".mx_InteractiveAuthEntryComponents_termsSubmit").click();
+        cy.get(".mx_InteractiveAuthEntryComponents_termsPolicy").within(() => {
+            cy.findByRole("checkbox").click(); // Click the checkbox before privacy policy anchor link
+            cy.findByLabelText("Privacy Policy").should("be.visible");
+        });
+
+        cy.findByRole("button", { name: "Accept" }).click();
 
         cy.get(".mx_UseCaseSelection_skip", { timeout: 30000 }).should("exist");
         cy.percySnapshot("Use-case selection screen");
         cy.checkA11y();
-        cy.get(".mx_UseCaseSelection_skip .mx_AccessibleButton").click();
+        cy.findByRole("button", { name: "Skip" }).click();
 
         cy.url().should("contain", "/#/home");
 
-        cy.get('[aria-label="User menu"]').click();
-        cy.get('[aria-label="Security & Privacy"]').click();
+        cy.findByRole("button", { name: "User menu" }).click();
+        cy.findByRole("menuitem", { name: "Security & Privacy" }).click();
         cy.get(".mx_DevicesPanel_myDevice .mx_DevicesPanel_deviceTrust .mx_E2EIcon").should(
             "have.class",
             "mx_E2EIcon_verified",
         );
     });
 
     it("should require username to fulfil requirements and be available", () => {
-        cy.get(".mx_ServerPicker_change", { timeout: 15000 }).click();
-        cy.get(".mx_ServerPickerDialog_continue").should("be.visible");
-        cy.get(".mx_ServerPickerDialog_otherHomeserver").type(homeserver.baseUrl);
-        cy.get(".mx_ServerPickerDialog_continue").click();
+        cy.findByRole("button", { name: "Edit", timeout: 15000 }).click();
+        cy.findByRole("button", { name: "Continue" }).should("be.visible");
+        cy.findByRole("textbox", { name: "Other homeserver" }).type(homeserver.baseUrl);
+        cy.findByRole("button", { name: "Continue" }).click();
         // wait for the dialog to go away
         cy.get(".mx_ServerPickerDialog").should("not.exist");
 
-        cy.get("#mx_RegistrationForm_username").should("be.visible");
+        cy.findByRole("textbox", { name: "Username" }).should("be.visible");
 
         cy.intercept("**/_matrix/client/*/register/available?username=_alice", {
             statusCode: 400,
@@ -105,7 +111,7 @@ describe("Registration", () => {
                 error: "User ID may not begin with _",
             },
         });
-        cy.get("#mx_RegistrationForm_username").type("_alice");
+        cy.findByRole("textbox", { name: "Username" }).type("_alice");
         cy.get(".mx_Field_tooltip")
             .should("have.class", "mx_Tooltip_visible")
             .should("contain.text", "Some characters not allowed");
@@ -120,12 +126,12 @@ describe("Registration", () => {
                 error: "The desired username is already taken",
             },
         });
-        cy.get("#mx_RegistrationForm_username").type("{selectAll}{backspace}bob");
+        cy.findByRole("textbox", { name: "Username" }).type("{selectAll}{backspace}bob");
         cy.get(".mx_Field_tooltip")
             .should("have.class", "mx_Tooltip_visible")
             .should("contain.text", "Someone already has that username");
 
-        cy.get("#mx_RegistrationForm_username").type("{selectAll}{backspace}foobar");
+        cy.findByRole("textbox", { name: "Username" }).type("{selectAll}{backspace}foobar");
         cy.get(".mx_Field_tooltip").should("not.have.class", "mx_Tooltip_visible");
     });
 });