From 3c44cad90a18376127a918e779b0a3e2736236af Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 4 Apr 2023 18:40:06 +0900 Subject: [PATCH 1/2] Update register.spec.ts - use Cypress Testing Library Signed-off-by: Suguru Hirahara --- cypress/e2e/register/register.spec.ts | 46 ++++++++++++++------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/cypress/e2e/register/register.spec.ts b/cypress/e2e/register/register.spec.ts index f6ea4379be4..6355b30b3d6 100644 --- a/cypress/e2e/register/register.spec.ts +++ b/cypress/e2e/register/register.spec.ts @@ -36,49 +36,51 @@ 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.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", @@ -86,14 +88,14 @@ describe("Registration", () => { }); 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 +107,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 +122,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"); }); }); From d18af7bc57d94458d582f133d05ae1db79c90b31 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 11 Apr 2023 19:13:46 +0900 Subject: [PATCH 2/2] findByRole - checkbox has implicit ARIA 'checkbox' role Signed-off-by: Suguru Hirahara --- cypress/e2e/register/register.spec.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/register/register.spec.ts b/cypress/e2e/register/register.spec.ts index 6355b30b3d6..df628d0c0e7 100644 --- a/cypress/e2e/register/register.spec.ts +++ b/cypress/e2e/register/register.spec.ts @@ -69,7 +69,11 @@ describe("Registration", () => { cy.percySnapshot("Registration terms prompt", { percyCSS }); cy.checkA11y(); - cy.get(".mx_InteractiveAuthEntryComponents_termsPolicy input").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");