În ultima vreme, am adăugat o integrare continuă pe blogul meu folosind Puppeteer pentru testarea finală. Scopul meu principal a fost să permit actualizarea automată a dependenței folosind Dependabot. În acest ghid vă voi arăta cum să creați singur o astfel de conductă.

Ca platformă CI, am ales Acțiuni Github, deoarece este foarte ușor de lucrat. De asemenea, se integrează frumos cu orice depozit Github pe care îl aveți deja. Totul a durat aproximativ două zile de muncă intermitentă și cred că rezultatele sunt destul de minunate.

Vreau să îi strig lui Nick Taylor, care a publicat articolul său pe această temăși am pus bazele eforturilor mele aici. Vă încurajez să citiți și articolul său.

Stiva mea tehnologică este însă destul de diferită. am ales păpușar ca cadru meu end-to-end din mai multe motive. Primul este că este scris și întreținut de către oamenii din spatele instrumentelor de dezvoltare Chrome, așa că mi se garantează o durată de viață de sprijin (până când Chrome dispare, ceea ce nu va fi în viitorul apropiat), și este foarte ușor să lucreaza cu.

Un alt motiv este că acasă lucrez la un laptop Windows cu WSL (pe care rulez zshell cu oh-my-zsh). Înființarea chiparosului este destul de dificilă (deși în lumea noastră nimic nu este imposibil). Ambele motive m-au determinat să aleg păpușar și până acum nu regret.

Testarea cap la cap

Testele cap la cap (sau E2E) sunt diferite de alte tipuri de teste automate. Testele E2E simulează un utilizator real, efectuând acțiuni pe ecran. Acest tip de test ar trebui să ajute la umplerea spațiului liber dintre testele „statice” – cum ar fi testele unitare, în care de obicei nu bootstrapați întreaga aplicație – și testarea componentelor, care de obicei rulează pe o singură componentă (sau un serviciu într-un micro -arhitectura serviciului).

Simulând interacțiunea cu utilizatorul, puteți testa experiența utilizării aplicației sau serviciului dvs. în același mod în care un utilizator obișnuit ar experimenta-l.

Mantra pe care încercăm să o urmăm este că nu contează dacă codul dvs. funcționează perfect dacă butonul pe care ar trebui să-l apăsați utilizatorul este ascuns din cauza unor capricii CSS. Rezultatul final este că utilizatorul nu va ajunge niciodată să simtă măreția codului dvs.

Noțiuni de bază cu păpușarul

Puppeteer are câteva opțiuni de configurare care îl fac cu adevărat minunat de utilizat pentru scrierea și validarea testelor.

Testele pentru păpușari pot rula într-o stare „cap-plin”. Aceasta înseamnă că puteți deschide o fereastră reală a browserului, puteți naviga la site-ul testat și puteți efectua acțiuni pe pagina dată. Astfel, voi – dezvoltatorii care scriu testele – puteți vedea exact ce se întâmplă în test, ce butoane sunt apăsate și cum arată interfața de utilizare rezultată.

Opusul „capului plin” ar fi fără cap, în cazul în care păpușarul nu deschide o fereastră de browser, ceea ce îl face ideal pentru conductele CI.

Puppeteer este destul de ușor de lucrat, dar veți fi surprins de numărul de acțiuni pe care le puteți efectua folosind un instrument automat.

Vom începe cu un răzuitor de bază care imprimă titlul paginii atunci când mergem la https://dorshinar.me. Pentru a rula teste de păpușar, trebuie să îl instalăm ca dependență:

npm i puppeteer

Acum, racleta noastră de bază arată astfel:

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://dorshinar.me");
  console.log(await page.title());

  await browser.close();
})();

Ceea ce facem aici este foarte simplu: deschidem browserul cu puppeteer.launch(), creați o pagină nouă cu browser.newPage() și navigați la acest blog cu page.goto(), și apoi imprimăm titlul.

Există o grămadă de lucruri pe care le putem face cu API-ul păpușar, cum ar fi:

Rularea codului în contextul paginii:

(async () => {
  await page.evaluate(() => document.querySelector(".awesome-button").click());
})();

Dând clic pe elemente din ecran folosind un selector CSS:

(async () => {
  await page.click(".awesome-button");
})();

Folosind $ selector (stil jQuery):

(async () => {
  await page.$(".awesome-button");
})();

Realizarea unei capturi de ecran:

(async () => {
  await page.screenshot({ path: "screenshot.png" });
})();

Există mai multe lucruri pe care le puteți face cu API-ul păpușar și vă sugerez să aruncați o privire înainte de a vă scufunda în testele de scriere. Dar exemplele pe care le-am arătat ar trebui să vă ofere o bază solidă din care să construiți.

Integrarea păpușarului cu Jest

glumă este un test de testare minunat și o bibliotecă de afirmații. Din documentele lor:

Jest este un cadru încântător de testare JavaScript, cu accent pe simplitate.

Jest vă permite să rulați teste, să importați importuri și să faceți afirmații complexe foarte ușor. Jest este, de asemenea, inclus în pachet cu create-react-app, așa că îl folosesc des la locul de muncă.

Scrierea primului test Jest

Testele Jest sunt foarte ușor de scris și ar putea fi familiare celor care cunosc alte cadre de testare (așa cum folosește Jest it, test, describe și alte convenții familiare).

Un test de bază ar putea arăta ca:

function subtract(a, b) {
  return a - b;
}

it("subtracts 4 from 6 and returns 2", () => {
  expect(subtract(6, 4)).toBe(2);
});

De asemenea, puteți grupa mai multe teste sub unul describe, astfel încât să puteți rula diferite descrieri sau să o utilizați pentru raportare convenabilă:

function divide(a, b) {
  if (b === 0) {
    throw new Error("Can't divide by zero!");
  }
  return a / b;
}

describe("divide", () => {
  it("throws when dividing by zero", () => {
    expect(() => divide(6, 0)).toThrow();
  });
  it("returns 3 when dividing 6 by 3", () => {
    expect(divide(6, 3)).toBe(2);
  });
});

Puteți, desigur, să creați teste mult mai complicate folosind simulări și alte tipuri de afirmații (sau așteptări), dar deocamdată este suficient.

Rularea testelor este, de asemenea, foarte simplă:

jest

Jest va căuta fișiere de testare cu oricare dintre următoarele convenții populare de denumire:

  • Fișiere cu .js sufix în __tests__ dosare.
  • Fișiere cu .test.js sufix.
  • Fișiere cu .spec.js sufix.

glumă-păpușar

Acum, trebuie să-l facem pe păpușar să se joace frumos cu glumă. Aceasta nu este o treabă deosebit de grea de făcut, deoarece există un pachet excelent numit glumă-păpușar care ne vine în ajutor.

Mai întâi, trebuie să-l instalăm ca dependență:

npm i jest-puppeteer

Și acum trebuie să ne extindem configurația de glumă. Dacă nu aveți încă unul, există o serie de modalități de a face acest lucru. Voi merge cu un fișier de configurare. Creați un fișier numit jest.config.js în rădăcina proiectului dvs.:

touch jest.config.js

În fișier trebuie să spunem jestului să îl folosească jest-puppeteereste presetat, așa că adăugați următorul cod în fișier:

module.exports = {
  preset: "jest-puppeteer"
  // The rest of your file...
};

Puteți specifica o configurație specială de lansare într-un jest-puppeteer.config.js fișier și jest-puppeteer va transmite această configurație către puppeteer.launch(). De exemplu:

module.exports = {
  launch: {
    headless: process.env.CI === "true",
    ignoreDefaultArgs: ["--disable-extensions"],
    args: ["--no-sandbox"],
    executablePath: "chrome.exe"
  }
};

jest-puppeteer se va ocupa de deschiderea unui nou browser și a unei noi pagini și le va stoca pe domeniul global. Deci, în testele dvs. puteți utiliza pur și simplu cele disponibile la nivel global browser și page obiecte.

O altă caracteristică excelentă pe care o putem folosi este abilitatea jest-puppeteer de a vă rula serverul în timpul testelor și de a-l ucide după aceea, cu server cheie:

module.exports = {
  launch: {},
  server: {
    command: "npm run serve",
    port: 9000,
    launchTimeout: 180000
  }
};

Acum glumă-păpușar va fugi npm run serve, cu un timeout de 180 de secunde (3 minute), și ascultați pe portul 9000 pentru a vedea când va fi activat. Odată ce serverul pornește, testele vor rula.

Acum puteți scrie o suită de testare completă folosind glumă și păpușar. Singurul lucru rămas este crearea unei conducte CI, pentru care vom folosi acțiuni GitHub.

Puteți adăuga un script la package.json fișier pentru a executa testele:

{
  "scripts": {
    "test:e2e": "jest"
  }
}

Acțiuni Github într-un esențial

Recent, Github a lansat o mare funcție nouă numită Actions. Practic, acțiunile vă permit să creați fluxuri de lucru folosind sintaxa simplă yaml și să le rulați pe mașini virtuale dedicate.

În fluxul de lucru puteți face aproape orice doriți, de la bază npm ci && npm build && npm run test la lucruri mai complicate.

Vă voi arăta cum să configurați un flux de lucru de bază care rulează suita de teste a păpușarilor și să previn îmbinarea dacă testele dvs. nu trec.

Cel mai simplu mod de a începe este să faceți clic pe Actions filă din repo-ul dvs. github. Dacă nu ați configurat nicio acțiune înainte, veți vedea o listă a fluxurilor de lucru configurate anterior, din care puteți alege una cu unele configurații predefinite.

github-actions-start-3

Pentru cazul nostru, alegerea acțiunii predefinite Node.js este suficient de bună. Yaml-ul generat arată astfel:

name: Node CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [8.x, 10.x, 12.x]

    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm install, build, and test
        run: |
          npm ci
          npm run build --if-present
          npm test
        env:
          CI: true

În fișier puteți configura numele fluxului de lucru, lucrările de rulat și când să rulați fluxul de lucru. Puteți rula fluxul de lucru la fiecare apăsare, la cereri de extragere noi sau ca eveniment recurent.

Lucrările dintr-un flux de lucru rulează în paralel în mod implicit, dar pot fi configurate pentru a rula în ordine. În fluxul de lucru de mai sus, există o singură lucrare numită build.

De asemenea, puteți alege sistemul de operare pe care va rula fluxul de lucru (în mod implicit puteți utiliza Windows Server 2019, Ubuntu 18.04, Ubuntu 16.04 și macOS Catalina 10.15 – în momentul publicării) cu runs-on cheie.

strategy cheie ne poate ajuta să rulăm testele pe o matrice de versiuni de noduri. În acest caz, avem cele mai recente versiuni ale celor mai recente LTS majors – 8.x, 10.x și 12.x. Dacă sunteți interesat de acest lucru, îl puteți lăsa ca atare sau pur și simplu îl puteți elimina și utiliza orice versiune specifică doriți.

Cea mai interesantă opțiune de configurare este steps. Cu el definim ce se întâmplă de fapt în conducta noastră.

Fiecare pas reprezintă o acțiune pe care o puteți efectua, cum ar fi verificarea codului din repo, configurarea versiunii nodului dvs., instalarea dependențelor, efectuarea testelor, încărcarea artefactelor (pentru a fi utilizate ulterior sau descărcate) și multe altele.

Puteți găsi o listă foarte extinsă de acțiuni ușor disponibile în Piața acțiunilor.

Configurarea de bază va instala dependențe, va construi proiectul nostru și va rula testele noastre. Dacă aveți nevoie de mai mult (de exemplu, dacă doriți să vă prezentați cererea pentru testele e2e), o puteți modifica după bunul plac. După ce ați terminat, comiteți modificările și sunteți bine să mergeți.

Forțarea verificărilor să treacă înainte de îmbinare

Singurul lucru care ne-a rămas este să ne asigurăm că niciun cod nu poate fi combinat înainte ca fluxul nostru de lucru să treacă cu succes. Pentru aceasta, accesați setările repo-ului dvs. și faceți clic pe Sucursale:

1611295147 178 Cum sa configurati o conducta de integrare continua cu GitHub Sucursală”>

Trebuie să stabilim un Regula de protecție a ramurilor astfel încât codul rău intenționat (sau cel puțin codul care nu trece testele noastre) să nu fie combinat. Click pe Adăugați o regulă, și sub Model de nume de sucursală puneți-vă ramura protejată (master, dev sau oricare dintre ele alegeți). A te asigura Solicitați verificarea stării înainte de a fuziona este bifat și veți putea alege ce verificări trebuie să treacă:

Solicitați verificări de stare

Faceți clic pe Salvați modificările de mai jos și sunteți bine să plecați!

Mulțumesc că ai citit!
Acest articol a fost publicat anterior pe blogul meu: dorshinar.me, Dacă doriți să citiți mai mult conținut, puteți verifica blogul meu, deoarece ar însemna mult pentru mine.

Dacă vrei să mă sprijini, poți Cumpără-mi o cafea de la ko-fi.com