Il nostro passaggio da Cypress a Playwright nei test

Nella nostra pubblicazione sull’extensive-react-boilerplate aggiornato, abbiamo menzionato che abbiamo migliorato la struttura di test integrativi passando da Cypress a Playwright. Ora, scopriremo un po’ di più sulla questa modifica.

All’epoca della scrittura degli automazioni di test, avevamo una quantità ridotta di funzionalità da coprire e non avevamo incontrato limitazioni significative nell’usare Cypress. Nonostante ciò, abbiamo deciso di rivolgermo l’attenzione a Playwright per diverse ragioni. Volevamo esplorare il framework creato da Microsoft e capire perché stava guadagnando popolarità. Inoltre, come nel caso in cui abbiamo aggiunto il supporto a MongoDB, abbiamo ricevuto richieste dalla comunità e dai colleghi che volevano iniziare un progetto basato sulla boilerplate con test su Playwright.

Mentre abbiamo iniziato il processo di migrazione dei test, abbiamo riconosciuto che la quantità di test era trascurabile. Pertanto, abbiamo deciso di scrivere manualmente i test per familiarizzare meglio con il nuovo framework.

Conoscenza del Nuovo Framework

Prima di tutto, abbiamo iniziato a discutere della documentazione. Possiamo affermare che la documentazione di Cypress supera quella di Playwright. La documentazione di Cypress è molto dettagliata e contiene numerosi esempi e tutorial. C’è anche un intero progetto su GitHub con esempi per ogni azione che può essere eseguita su una tipica pagina web. Inoltre, la comunità di Cypress è più numerosa rispetto a Playwright. Anche se i developer esperti potrebbero essere soddisfatti delle informazioni fornite nella documentazione di Playwright, i developer meno esperti potrebbero trovare più divertente imparare Cypress.

Passiamo all’impostazione del file di configurazione. Non troviamo differenze significative tra i due framework. Dobbiamo solo configurare i timeout e l’URL di base. Abbiamo anche esplorato alcune nuove funzionalità offerte da Playwright a questo proposito, come:

• Impostazione dei timeout per ogni test, compresi gli hook di test e Before/After:

// playwright.config.ts
export default defineConfig({
...
  timeout: 2 * 60 * 1000,
...
});

• Supporto dei test su WebKit, che si basa su Apple Safari, mentre Cypress ne è sprovvisto

Playwright ha anche la possibilità di avviare un server di sviluppo locale con il progetto prima di eseguire i test, che può essere facilmente implementato utilizzando il parametro webServer.

  webServer: {
    command: process.env.CI
      ? "npm run build:e2e && npm run start"
      : "npm run dev",
    url: "http://127.0.0.1:3000",
    reuseExistingServer: !process.env.CI,
  },

Poi, scriviamo il nostro primo test. La differenza di sintassi tra i due framework è notevole. Cypress utilizza una sintassi concatenabile e ha una propria implementazione dell’asincronia, mentre Playwright supporta lo standard ECMAScript 2015 (ES6) e lavora con la comoda costruzione async/await per le funzioni asincrone.

Ecco un esempio di codice di Playwright:

  test("should be successful open page and check data is displayed", async ({
    page,
  }) => {
    await page.getByTestId("profile-menu-item").click();
    await page.getByTestId("user-profile").click();
    await page.waitForURL(/\/profile/);
    await expect(page.getByTestId("user-name")).toHaveText(
      `${firstName} ${lastName}`
    );
    await expect(page.getByTestId("user-email")).toHaveText(email, {
      ignoreCase: true,
    });
    await page.getByTestId("edit-profile").click();
    await page.waitForURL(/\/profile\/edit/);
    await expect(page.getByTestId("first-name").locator("input")).toHaveValue(
      firstName
    );
    await expect(page.getByTestId("last-name").locator("input")).toHaveValue(
      lastName
    )

ed ecco Cypress:

  it("should be successful open page and check data is displayed", () => {
    cy.getBySel("PersonIcon").click();
    cy.getBySel("user-profile").click();
    cy.location("pathname").should("include", "/profile");
    cy.getBySel("user-name").should("contain.text", firstName + " " + lastName);
    cy.getBySel("user-email").should("contain.text", email);
    cy.getBySel("edit-profile").click();
    cy.location("pathname").should("include", "/profile/edit");
    cy.get('[data-testid="first-name"] input').should("contain.value", firstName);
    cy.get('[data-testid="last-name"] input').should("contain.value", lastName);
  });

Confronti tra framework

Quando si tratta di eseguire i test, notiamo le differenze architettoniche tra i framework.

• Cypress esegue i comandi all’interno del browser, il che gli consente di accedere facilmente a componenti importanti come il DOM, lo storage locale e gli oggetti della finestra. D’altra parte, Playwright utilizza un’architettura client-server e comunica con i browser tramite una connessione WebSocket.
• Dopo aver riscritto tutti i test, li abbiamo eseguiti tutti e osservato che per default, Playwright esegue i test in parallelo, fornendo questa caratteristica gratuitamente. Invece, Cypress esegue la parallelizzazione solo per macchine differenti, e questa è una caratteristica a pagamento.
• Eseguendo gli stessi test in entrambi i framework abbiamo scoperto che Playwright ha completato i test più velocemente di Cypress.

Abbiamo condotto i test e scoperto che Playwright li ha completati in 2,7 minuti:

Cypress invece ha impiegato 3,82 minuti, mostrando una differenza significativa di tempo a favore di Playwright.

Conclusione

Prendendo in considerazione tutti i punti sopra citati, si potrebbe chiedersi perché abbiamo deciso di cambiare il framework. Anche se non abbiamo visto benefici significativi in quel momento, abbiamo preso in considerazione il futuro del nostro progetto e progetti potenziali che saranno costruiti sopra boilerplate dell’ecosistema bcboilerplates. Da questo punto di vista, Playwright sembrava più promettente di Cypress a causa della parallelizzazione dei test, della sua velocità superiore, la possibilità di testare applicazioni mobile, la possibilità di utilizzare linguaggi di programmazione diverse da JS e TS e l’appoggio di un player importante come Microsoft.