From b5493680cee23b3683a644dcdb452f43e2b3fbe0 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 11 Apr 2023 17:37:05 +0000 Subject: [PATCH] Update `register.spec.ts` - use Cypress Testing Library (#10566) * Update register.spec.ts - use Cypress Testing Library Signed-off-by: Suguru Hirahara * findByRole - checkbox has implicit ARIA 'checkbox' role Signed-off-by: Suguru Hirahara --------- Signed-off-by: Suguru Hirahara --- cypress/e2e/register/register.spec.ts | 52 +++++++++++++++------------ 1 file changed, 29 insertions(+), 23 deletions(-) diff --git a/cypress/e2e/register/register.spec.ts b/cypress/e2e/register/register.spec.ts index f6ea4379be..df628d0c0e 100644 --- a/cypress/e2e/register/register.spec.ts +++ b/cypress/e2e/register/register.spec.ts @@ -36,49 +36,55 @@ 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", @@ -86,14 +92,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 +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"); }); });