Esirakenduste testimise automatiseerimine: Playwright ja Cypress edasijõudnute mustrid

Pidevalt arenevas veebiarenduse maastikus on teie esirakenduste kvaliteedi ja usaldusväärsuse tagamine esmatähtis. Automatiseeritud testimine mängib selle eesmärgi saavutamisel kriitilist rolli. Playwright ja Cypress on kaks populaarset JavaScriptil põhinevat täieliku ahela (E2E) testimisraamistikku, mis on viimastel aastatel märkimisväärset populaarsust kogunud. Kuigi mõlemad pakuvad tugevaid võimalusi testide loomiseks ja käitamiseks, on edasijõudnute mustrite valdamine hooldatavate, skaleeritavate ja usaldusväärsete testikomplektide loomisel ülioluline. See põhjalik juhend süveneb nendesse edasijõudnute mustritesse, pakkudes praktilisi näiteid ja teadmisi teie esirakenduste testimisstrateegia täiustamiseks.

Maastiku mõistmine: Playwright vs. Cypress

Enne edasijõudnute mustritesse süvenemist on oluline mõista Playwright'i ja Cypress'i põhimõttelisi erinevusi ja tugevusi. Mõlemad raamistikud püüavad lihtsustada E2E testimist, kuid lähenevad probleemile erinevate arhitektuuride ja disainifilosoofiatega.

Playwright: Brauseriteülene jõujaam

Microsofti arendatud Playwright paistab silma oma brauseriteülese ühilduvusega. See toetab Chromiumi, Firefoxi ja WebKiti (Safari), võimaldades teil käivitada teste kõigis suuremates brauserites ühe koodibaasiga. Playwright on suurepärane ka keeruliste stsenaariumide käsitlemisel, mis hõlmavad mitut vahekaarti, iframe'i ja shadow DOM-i. Selle automaatse ootamise mehhanism ootab implitsiitselt, kuni elemendid on interaktiivsed, vähendades testide ebastabiilsust.

Cypress: Arendajasõbralik valik

Cypress seevastu keskendub sujuva arendajakogemuse pakkumisele. Selle ajas rändamise silumisfunktsioon, reaalajas taaslaadimine ja intuitiivne API teevad sellest arendajate lemmiku. Cypress töötab otse brauseris, pakkudes võrreldamatut kontrolli ja nähtavust rakenduse oleku üle. Kuid Cypress toetab peamiselt Chromiumil põhinevaid brausereid ja Firefoxi, piiratud toega Safari jaoks.

Õige raamistiku valimine sõltub teie konkreetsetest vajadustest ja prioriteetidest. Kui brauseriteülene ühilduvus on hädavajalik, on Playwright selge võitja. Kui arendajakogemus ja silumisvõimalused on olulisemad, võib Cypress olla parem valik.

Edasijõudnute testimismustrid: Sügav sukeldumine

Nüüd uurime mõningaid edasijõudnute testimismustreid, mis võivad oluliselt parandada teie Playwright'i ja Cypress'i testikomplektide kvaliteeti ja hooldatavust.

1. Leheobjekti mudel (POM)

Leheobjekti mudel (POM) on disainimuster, mis soodustab koodi taaskasutatavust ja hooldatavust, kapseldades konkreetse lehe elemendid ja interaktsioonid spetsiaalsesse klassi. See muster aitab abstraheerida aluseks olevat HTML-struktuuri, muutes teie testid vähem hapraks ja lihtsamini uuendatavaks, kui kasutajaliides muutub.

Implementatsioon (Playwright):

            // page.ts
import { expect, Locator, Page } from '@playwright/test';

export class HomePage {
    readonly page: Page;
    readonly searchInput: Locator;
    readonly searchButton: Locator;

    constructor(page: Page) {
        this.page = page;
        this.searchInput = page.locator('input[name="q"]');
        this.searchButton = page.locator('button[type="submit"]');
    }

    async goto() {
        await this.page.goto('https://www.example.com');
    }

    async search(searchTerm: string) {
        await this.searchInput.fill(searchTerm);
        await this.searchButton.click();
    }
}

            

              
                Copy
              
            
          

            // example.spec.ts
import { test, expect } from '@playwright/test';
import { HomePage } from './page';

test('search for a term', async ({ page }) => {
    const homePage = new HomePage(page);
    await homePage.goto();
    await homePage.search('Playwright');
    await expect(page).toHaveURL(/.*Playwright/);
});

            

              
                Copy
              
            
          

Implementatsioon (Cypress):

            // page.js
class HomePage {
    visit() {
        cy.visit('https://www.example.com')
    }

    search(searchTerm) {
        cy.get('input[name="q"]')
            .type(searchTerm)
        cy.get('button[type="submit"]')
            .click()
    }

    verifySearch(searchTerm) {
        cy.url().should('include', searchTerm)
    }
}

export default HomePage

            

              
                Copy
              
            
          

            // example.spec.js
import HomePage from './page'

describe('Home Page', () => {
    it('should search for a term', () => {
        const homePage = new HomePage()
        homePage.visit()
        homePage.search('Cypress')
        homePage.verifySearch('Cypress')
    })
})

            

              
                Copy
              
            
          

2. Komponentide testimine

Komponentide testimine keskendub üksikute kasutajaliidese komponentide isoleeritud testimisele. See lähenemine võimaldab teil kontrollida iga komponendi funktsionaalsust ja käitumist, ilma et peaksite tuginema kogu rakendusele. Komponentide testimine on eriti kasulik keerukate kasutajaliidese teekide ja raamistike, nagu React, Vue.js ja Angular, puhul.

Komponentide testimise eelised:

• Kiirem testide täitmine: Komponendi testid on tavaliselt kiiremad kui E2E testid, kuna need testivad ainult väikest osa rakendusest.
• Parem isolatsioon: Komponendi testid isoleerivad komponendid välistest sõltuvustest, mis teeb vigade tuvastamise ja parandamise lihtsamaks.
• Parem koodi katvus: Komponentide testimine võib pakkuda paremat koodi katvust, testides üksikuid komponente põhjalikult.

Implementatsioon (Playwright koos Reactiga):

Playwright'i saab kasutada komponentide testimiseks selliste tööriistadega nagu Vite ja React's Testing Library. Kuigi Playwright on E2E testimises suurepärane, võivad spetsialiseeritud komponentide testimise raamistikud pakkuda selle konkreetse kasutusjuhtumi jaoks paremat arendajakogemust (DX).

Implementatsioon (Cypress koos Reactiga):

            // Button.jsx
import React from 'react';

function Button({ onClick, children }) {
  return {children};
}

export default Button;

            

              
                Copy
              
            
          

            // Button.cy.jsx
import React from 'react';
import Button from './Button';

describe('Button Component', () => {
  it('should call onClick when clicked', () => {
    const onClick = cy.stub();
    cy.mount(Click Me);
    cy.get('button').click();
    cy.wrap(onClick).should('be.called');
  });

  it('should display the children text', () => {
    cy.mount(Hello World);
    cy.get('button').should('contain', 'Hello World');
  });
});

            

              
                Copy
              
            
          

3. Visuaalne testimine

Visuaalne testimine hõlmab teie rakenduse kasutajaliidese ekraanipiltide võrdlemist baaspiltidega, et tuvastada visuaalseid regressioone. Seda tüüpi testimine on oluline tagamaks, et teie rakendus näeb õige välja erinevates brauserites, seadmetes ja ekraanisuurustes. Visuaalne testimine võib tabada peeneid kasutajaliidese probleeme, mis võivad funktsionaalsete testidega märkamata jääda.

Visuaalse testimise tööriistad:

• Applitools: Kaubanduslik visuaalse testimise platvorm, mis pakub täiustatud pildivõrdlust ja tehisintellektil põhinevat analüüsi.
• Percy: Teine populaarne kaubanduslik visuaalse testimise platvorm, mis integreerub sujuvalt CI/CD torujuhtmetega.
• Playwright'i sisseehitatud hetktõmmiste testimine: Playwright võimaldab teil teha ekraanipilte ja võrrelda neid baaspiltidega otse oma testides.
• Cypress Image Snapshot: Cypressi pistikprogramm, mis pakub sarnaseid ekraanipiltide võrdlemise võimalusi.

Implementatsioon (Playwright koos sisseehitatud hetktõmmistega):

            // visual.spec.ts
import { test, expect } from '@playwright/test';

test('homepage has correct visual appearance', async ({ page }) => {
  await page.goto('https://www.example.com');
  expect(await page.screenshot()).toMatchSnapshot('homepage.png');
});

            

              
                Copy
              
            
          

Implementatsioon (Cypress koos Cypress Image Snapshot'iga):

            // cypress.config.js
const { defineConfig } = require('cypress')
const { initPlugin } = require('cypress-plugin-snapshots/plugin');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      initPlugin(on, config);
      return config;
    },
  },
})

            

              
                Copy
              
            
          

            // visual.spec.js
import { compareSnapshotCommand } from 'cypress-image-snapshot/command'
addMatchImageSnapshotCommand();

describe('Visual Regression Testing', () => {
    it('Homepage Visual Test', () => {
        cy.visit('https://www.example.com')
        cy.get('body').toMatchImageSnapshot()
    })
})

            

              
                Copy
              
            
          

4. Andmepõhine testimine

Andmepõhine testimine hõlmab sama testi käivitamist erinevate andmekogumitega. See muster on kasulik kontrollimaks, kas teie rakendus käitub õigesti erinevate sisendite ja stsenaariumide korral. Andmeid saab hankida CSV-failidest, JSON-failidest, andmebaasidest või isegi välistest API-dest.

Andmepõhise testimise eelised:

• Suurem testi katvus: Andmepõhine testimine võimaldab teil testida laiemat valikut stsenaariume minimaalse koodi dubleerimisega.
• Parem testide hooldatavus: Andmepõhiseid teste on lihtsam uuendada ja hooldada, kuna testiloogika on eraldatud testandmetest.
• Parem testide loetavus: Andmepõhised testid on sageli loetavamad ja arusaadavamad, kuna testandmed on selgelt määratletud.

Implementatsioon (Playwright koos JSON-andmetega):

            // data.json
[
  {
    "username": "user1",
    "password": "pass1"
  },
  {
    "username": "user2",
    "password": "pass2"
  }
]

            

              
                Copy
              
            
          

            // data-driven.spec.ts
import { test, expect } from '@playwright/test';
import * as testData from './data.json';

testData.forEach((data) => {
  test(`login with ${data.username}`, async ({ page }) => {
    await page.goto('https://www.example.com/login'); // Asendage oma sisselogimislehega
    await page.locator('#username').fill(data.username);
    await page.locator('#password').fill(data.password);
    await page.locator('button[type="submit"]').click();

    // Lisage väited eduka sisselogimise kontrollimiseks
    // Näide: await expect(page).toHaveURL(/.*dashboard/);
  });
});

            

              
                Copy
              
            
          

Implementatsioon (Cypress koos testandmetega):

            // cypress/fixtures/data.json
[
  {
    "username": "user1",
    "password": "pass1"
  },
  {
    "username": "user2",
    "password": "pass2"
  }
]

            

              
                Copy
              
            
          

            // data-driven.spec.js
describe('Data-Driven Testing', () => {
  it('Login with multiple users', () => {
    cy.fixture('data.json').then((users) => {
      users.forEach((user) => {
        cy.visit('https://www.example.com/login') // Asendage oma sisselogimislehega
        cy.get('#username').type(user.username)
        cy.get('#password').type(user.password)
        cy.get('button[type="submit"]').click()

        // Lisage väited eduka sisselogimise kontrollimiseks
        // Näide: cy.url().should('include', '/dashboard')
      })
    })
  })
})

            

              
                Copy
              
            
          

5. API testimine E2E testide raames

API testimise integreerimine teie E2E testidesse võib pakkuda terviklikumat ja usaldusväärsemat testimisstrateegiat. See lähenemine võimaldab teil kontrollida teie esirakendust juhtivat taustasüsteemi funktsionaalsust, tagades, et andmed liiguvad õigesti ja et kasutajaliides peegeldab oodatud olekut.

API testimise eelised E2E testide raames:

• Taustasüsteemi probleemide varajane avastamine: API testid suudavad tuvastada taustasüsteemi probleeme arendustsükli alguses, vältides nende mõju esirakendusele.
• Parem testide usaldusväärsus: API testid võivad tagada, et taustasüsteem on enne esirakenduse testide käivitamist teadaolevas olekus, vähendades ebastabiilsust.
• Täielik ahela valideerimine: API ja kasutajaliidese testide kombineerimine tagab teie rakenduse funktsionaalsuse täieliku valideerimise.

Implementatsioon (Playwright):

            // api.spec.ts
import { test, expect } from '@playwright/test';

test('create a new user via API and verify in UI', async ({ page, request }) => {
  // 1. Loo kasutaja API kaudu
  const response = await request.post('/api/users', {
    data: {
      name: 'John Doe',
      email: 'john.doe@example.com'
    }
  });
  expect(response.status()).toBe(201); // Eeldades 201 Created
  const responseBody = await response.json();
  const userId = responseBody.id;

  // 2. Navigeerige kasutajaliideses kasutajate nimekirja juurde
  await page.goto('/users'); // Asendage oma kasutajate nimekirja lehega

  // 3. Veenduge, et uus kasutaja kuvatakse
  await expect(page.locator(`text=${'John Doe'}`)).toBeVisible();
});

            

              
                Copy
              
            
          

Implementatsioon (Cypress):

            // api.spec.js
describe('API and UI Integration Test', () => {
  it('Creates a user via API and verifies it in the UI', () => {
    // 1. Loo kasutaja API kaudu
    cy.request({
      method: 'POST',
      url: '/api/users', // Asendage oma API otspunktiga
      body: {
        name: 'Jane Doe',
        email: 'jane.doe@example.com'
      }
    }).then((response) => {
      expect(response.status).to.eq(201) // Eeldades 201 Created
      const userId = response.body.id

      // 2. Navigeerige kasutajaliideses kasutajate nimekirja juurde
      cy.visit('/users') // Asendage oma kasutajate nimekirja lehega

      // 3. Veenduge, et uus kasutaja kuvatakse
      cy.contains('Jane Doe').should('be.visible')
    })
  })
})

            

              
                Copy
              
            
          

6. Ligipääsetavuse testimine

Ligipääsetavuse testimine tagab, et teie rakendus on kasutatav ka puuetega inimestele. Seda tüüpi testimine on ülioluline kaasavate ja õiglaste veebikogemuste loomiseks. Automatiseeritud ligipääsetavuse testimine aitab teil tuvastada levinud ligipääsetavuse probleeme, nagu puuduv alt-tekst, ebapiisav värvikontrastsus ja klaviatuuriga navigeerimise probleemid.

Ligipääsetavuse testimise tööriistad:

• axe-core: Populaarne avatud lähtekoodiga ligipääsetavuse testimise teek.
• axe DevTools: Brauseri laiendus, mis pakub reaalajas ligipääsetavuse tagasisidet.
• Lighthouse: Veebi jõudluse ja auditeerimise tööriist, mis sisaldab ligipääsetavuse kontrolle.

Implementatsioon (Playwright koos axe-core'iga):

            // accessibility.spec.ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('homepage should pass accessibility checks', async ({ page }) => {
  await page.goto('https://www.example.com');
  const axeBuilder = new AxeBuilder({ page });
  const accessibilityScanResults = await axeBuilder.analyze();
  expect(accessibilityScanResults.violations).toEqual([]); // Või käsitlege rikkumisi vastavalt
});

            

              
                Copy
              
            
          

Implementatsioon (Cypress koos axe-core'iga):

            // support/commands.js
import 'cypress-axe'

Cypress.Commands.add('checkA11y', (context, options) => {
  cy.configureAxe(options)
  cy.checkA11y(context, options)
})

            

              
                Copy
              
            
          

            // accessibility.spec.js
describe('Accessibility Testing', () => {
  it('Homepage should be accessible', () => {
    cy.visit('https://www.example.com')
    cy.injectAxe()
    cy.checkA11y()
  })
})

            

              
                Copy
              
            
          

7. Autentimise ja autoriseerimise käsitlemine

Autentimine ja autoriseerimine on veebirakenduste turvalisuse kriitilised aspektid. Nende funktsioonide põhjalik testimine on oluline kasutajaandmete kaitsmiseks ja volitamata juurdepääsu vältimiseks.

Autentimise ja autoriseerimise testimise strateegiad:

• Kasutajaliidesepõhine autentimine: Simuleerige kasutaja sisselogimist kasutajaliidese kaudu ja veenduge, et rakendus autendib ja autoriseerib kasutaja õigesti.
• API-põhine autentimine: Kasutage API-päringuid autentimislubade saamiseks ja seejärel kasutage neid lube kaitstud ressurssidele juurdepääsemiseks.
• Rollipõhise juurdepääsukontrolli (RBAC) testimine: Veenduge, et erinevate rollidega kasutajatel on vastavad õigused rakenduse erinevatele osadele juurdepääsemiseks.

Näide (Playwright – kasutajaliidesepõhine autentimine):

            // auth.spec.ts
import { test, expect } from '@playwright/test';

test('login and access protected resource', async ({ page }) => {
  await page.goto('/login'); // Asendage oma sisselogimislehega
  await page.locator('#username').fill('valid_user');
  await page.locator('#password').fill('valid_password');
  await page.locator('button[type="submit"]').click();
  await expect(page).toHaveURL(/.*dashboard/); // Asendage oma töölaua URL-iga

  // Nüüd pääsete juurde kaitstud ressursile
  await page.goto('/protected-resource'); // Asendage oma kaitstud ressursi URL-iga
  await expect(page.locator('h1')).toContainText('Protected Resource');
});

            

              
                Copy
              
            
          

Näide (Cypress – API-põhine autentimine):

            // auth.spec.js
describe('Authentication Testing', () => {
  it('Logs in via API and accesses a protected resource', () => {
    // 1. Hankige API-st autentimisluba
    cy.request({
      method: 'POST',
      url: '/api/login', // Asendage oma sisselogimise API otspunktiga
      body: {
        username: 'valid_user',
        password: 'valid_password'
      }
    }).then((response) => {
      expect(response.status).to.eq(200)
      const token = response.body.token

      // 2. Seadke luba kohalikku salvestusruumi või küpsistesse
      cy.setLocalStorage('authToken', token)

      // 3. Külastage kaitstud ressurssi, mis on nüüd autenditud
      cy.visit('/protected-resource') // Asendage oma kaitstud ressursi URL-iga

      // 4. Veenduge, et kasutaja pääseb ressursile juurde
      cy.contains('Protected Content').should('be.visible')
    })
  })
})

            

              
                Copy
              
            
          

Parimad praktikad testikomplektide hooldamiseks

Robustse ja usaldusväärse testikomplekti loomine on vaid pool võitu. Selle aja jooksul hooldamine on sama oluline. Siin on mõned parimad praktikad oma Playwright'i ja Cypress'i testikomplektide heas korras hoidmiseks.

1. Hoidke testid fokusseeritud ja lühidad

Iga test peaks keskenduma ühe konkreetse funktsionaalsuse osa kontrollimisele. Vältige liiga keeruliste testide loomist, mis püüavad katta liiga palju. Lühikesi teste on lihtsam mõista, siluda ja hooldada.

2. Kasutage tähendusrikkaid testide nimesid

Andke oma testidele selged ja kirjeldavad nimed, mis peegeldavad täpselt, mida nad testivad. See muudab iga testi eesmärgi mõistmise ja vigade kiire tuvastamise lihtsamaks.

3. Vältige väärtuste koodi sisse kirjutamist

Vältige väärtuste otse oma testidesse kirjutamist. Selle asemel kasutage testandmete salvestamiseks konfiguratsioonifaile või keskkonnamuutujaid. See muudab testide uuendamise rakenduse muutumisel lihtsamaks.

4. Vaadake teste regulaarselt üle ja refaktoreerige neid

Planeerige oma testikomplekti regulaarseid ülevaatusi, et tuvastada ja refaktoreerida teste, mis muutuvad hapraks või raskesti hooldatavaks. Eemaldage kõik testid, mis ei ole enam asjakohased või mis pakuvad piiratud väärtust.

5. Integreerige CI/CD torujuhtmetega

Integreerige oma Playwright'i ja Cypress'i testid oma CI/CD torujuhtmetesse, et tagada testide automaatne käivitamine iga koodimuudatuse korral. See aitab teil vigu varakult tabada ja vältida regressioonide tootmisse jõudmist.

6. Kasutage testide aruandlus- ja analüüsitööriistu

Kasutage testide aruandlus- ja analüüsitööriistu, et jälgida testitulemusi, tuvastada suundumusi ja leida parendusvaldkondi. Need tööriistad võivad anda väärtuslikku teavet teie rakenduse seisundi ja stabiilsuse kohta.

Kokkuvõte

Edasijõudnute testimismustrite valdamine Playwright'i ja Cypress'iga on oluline robustsete, hooldatavate ja skaleeritavate esirakenduste loomiseks. Rakendades selles juhendis kirjeldatud mustreid ja parimaid praktikaid, saate oluliselt parandada oma testikomplektide kvaliteeti ja usaldusväärsust ning pakkuda erakordseid kasutajakogemusi. Võtke need tehnikad omaks ja olete hästi varustatud tänapäevase esirakenduste testimise väljakutsetega toimetulemiseks. Ärge unustage kohandada neid mustreid oma konkreetse projekti nõuetega ja püüdke pidevalt oma testimisstrateegiat täiustada. Head testimist!