Przyznajmy, że pisanie zautomatyzowanych testów nie jest najciekawszą rzeczą w życiu programisty. Jako deweloperzy chcemy pisać funkcje, naprawiać błędy i ulepszać świat. Jeśli jednak nie korzystamy z testów automatycznych w naszych procesach, w długim okresie mogą się pojawić problemy. Dlatego też uważamy, że pisanie testów automatycznych jest ważne.
Za pomocą panelu Dyktafon w Narzędziach deweloperskich w Chrome możesz nagrywać i odtwarzać ścieżki użytkownika, eksportować je do różnych formatów (np. skryptów testowych) za pomocą różnych bibliotek i rozszerzeń innych firm, dostosowywać ścieżki użytkownika za pomocą biblioteki Puppeteer Replay oraz integrować je z dotychczasowymi przepływami pracy.
W tym poście na blogu omówimy:
- Jak za pomocą kodu wyeksportować i odtworzyć ścieżki użytkownika.
- Jak dostosować ścieżki użytkowników za pomocą Puppeteer Replay.
- Jak zintegrować się z przepływami pracy CI/CD.
W tym poście na blogu zakładamy, że znasz już podstawy Dyktafonu. Jeśli dopiero zaczynasz korzystać z nagrywarki, obejrzyj ten krótki samouczek i przewodnik wideo.
Eksportuj wzorce przeglądania i odtwarzaj je automatycznie
Domyślnie Dyktafon umożliwia wyeksportowanie tych nagrań w postaci skryptu Puppeteer lub Puppeteer Replay albo jako zwykłego pliku JSON.
Po wyeksportowaniu przepływów użytkowników w postaci plików JSON możesz zaimportować je z powrotem do panelu Dyktafonu i ponownie odtworzyć lub użyć do tego bibliotek zewnętrznych. Biblioteka Puppeteer Replay jest jedną z dostępnych bibliotek.
Odtwarzanie za pomocą Puppeteer Replay
Postępuj zgodnie z instrukcjami w repozytorium, aby zainstalować Puppeteer Replay.
Załóżmy, że ścieżki użytkownika w formacie JSON są zapisane w folderze recordings
(np. projekt demonstracyjny). Aby wykonać co najmniej 1 ścieżkę użytkownika, możesz użyć tego polecenia:
# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json
# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json
Opcjonalnie możesz dodać skrypt npm do uruchamiania nagrań. dodaj ten wiersz do pola scripts
w package.json
:
"replay-all": "replay recordings"
Aby odtworzyć wszystkie nagrania, możesz uruchomić npm run replay-all
w wierszu poleceń.
Domyślnie schematy działań użytkownika są odtwarzane bez interfejsu użytkownika (to tzw. tryb bez interfejsu graficznego). Jeśli chcesz zobaczyć interfejs użytkownika, przed uruchomieniem polecenia ustaw zmienną środowiskową PUPPETEER_HEADLESS
na wartość false.
PUPPETEER_HEADLESS=false npm run replay-all
Odtwarzanie z bibliotek innych firm
Istnieją biblioteki innych firm, których można używać do odtwarzania poza przeglądarką Chrome. Oto pełna lista bibliotek.
Na przykład TestCafe to platforma do kompleksowego testowania. Umożliwia odtwarzanie ścieżek użytkowników w formacie JSON za pomocą Safari i innych narzędzi.
npm install -g testcafe
# replay with selected browsers
testcafe safari ./recordings/order-one-coffee.json
testcafe firefox ./recordings/order-one-coffee.json
testcafe chrome ./recordings/order-one-coffee.json
# replay with all browsers
testcafe all ./recordings/order-one-coffee.json
Z kolei Saucelabs to działająca w chmurze platforma testowa. Obsługuje ponowne odtwarzanie przepływów użytkowników JSON w różnych przeglądarkach i wersjach w chmurze.
Oto przykładowy plik konfiguracji w Saucelabs. Sprawdź repozytorium demonstracyjne.
apiVersion: v1alpha
kind: puppeteer-replay
suites:
- name: "order a coffee"
recordings: [ "recordings/order-a-coffee.json" ]
…
Eksportowanie ścieżek użytkowników z różnymi rozszerzeniami
Oprócz opcji domyślnych możesz też instalować rozszerzenia, aby eksportować ścieżki użytkowników do różnych formatów.
Możesz na przykład rejestrować i eksportować przepływy użytkowników jako skrypt niestandardowy WebPageTest. Dzięki temu skryptowi możesz testować skuteczność wieloetapowych procesów w aplikacjach. Jednak napisanie tych scenariuszy bywa trudne.
Jeśli korzystasz już z narzędzi do testowania, możesz też skorzystać z rozszerzeń, które umożliwiają eksportowanie przepływów użytkowników do różnych skryptów testowych, np. Cypress, Nightwatch, WebdriverIO, Testing Library itd. Oto pełna lista. Pomoże to Tobie i Twojemu zespołowi szybciej rozpocząć pisanie testów.
Przekształcanie za pomocą kodu różnych skryptów testowych
Oprócz rozszerzeń większość dostawców testów publikuje też biblioteki, które ułatwiają konwertowanie wielu przepływów danych użytkownika w formacie JSON za pomocą kodu.
Możesz na przykład użyć bibliotek @cypress/chrome-recorder, by eksportować przepływy użytkowników do testów Cypress.
npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json
Powtarzaj czynności związane z użytkownikami dzięki rozszerzeniom
Od wersji Chrome 112 możesz zwiększyć wygodę korzystania z urządzenia dzięki rozszerzeniom do ponownego odtwarzania nagrań. Dzięki tym rozszerzeniom możesz płynnie zintegrować usługi i infrastrukturę innych firm, aby odtwarzać nagrania bez opuszczania Narzędzi deweloperskich.
Na początek przejrzyj listę dostępnych rozszerzeń lub dowiedz się, jak utworzyć własne rozszerzenie niestandardowe.
Tworzenie własnych rozszerzeń lub bibliotek
Wszystkie rozszerzenia i biblioteki są budowane na podstawie biblioteki Puppeteer Replay. Oprócz możliwości odtwarzania procesów użytkownika Puppeteer Replay udostępnia interfejsy API, które umożliwiają dostosowywanie lub przekształcanie odtwarzania procesów użytkownika.
Dostosowywanie odtwarzania wzorca przeglądania
Zbudujmy wtyczkę do zrzutów ekranu. W każdej z tych wzorców chcemy skupić się na:
- Aby zrobić zrzut ekranu na końcu każdego kroku i zapisać go w folderze
_screenshots
. - Ten szablon ma wyświetlać komunikat po zakończeniu wykonywania przepływu użytkownika.
Oto fragment kodu. Możesz też pobrać tę prezentację i zacząć z nią korzystać.
/* screenshot-plugin.mjs */
import { mkdirSync } from "fs";
import { PuppeteerRunnerExtension } from "@puppeteer/replay";
// create folder if not exist
let screenshotFolder = "_screenshots";
mkdirSync(screenshotFolder, { recursive: true });
export default class ScreenshotPlugin extends PuppeteerRunnerExtension {
count = 0;
async afterEachStep(step, flow) {
await super.afterEachStep(step, flow);
this.count = this.count + 1;
const path = `${screenshotFolder}/${flow.title}-${this.count}.png`;
await this.page.screenshot({ path });
console.log(`Saved screenshot as ${path}`);
}
async afterAllSteps(step, flow) {
await super.afterAllSteps(step, flow);
console.log("Operation completed successfully.");
}
}
Kod sam w sobie jest bardzo ekspresyjny. Rozszerzamy interfejs API PuppeteerRunnerExtension
, aby po każdym kroku zapisywać zrzut ekranu i rejestrować wiadomość.
Zapisz plik, a potem uruchom ścieżki użytkownika z tym rozszerzeniem, używając tego polecenia:
# replay one user flow with plugin
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/order-a-coffee.json
# replay all user flows with plugin under recordings folder
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/*.json
Wyniki będą wyglądać tak:
Saved screenshot as _screenshots/order-a-coffee-1.png
Saved screenshot as _screenshots/order-a-coffee-2.png
Saved screenshot as _screenshots/order-a-coffee-3.png
…
Operation completed successfully.
Przekształcanie wzorców użytkowników
Innym sposobem dostosowywania ścieżki użytkownika jest przekształcenie jej w różne formaty (np. skrypty testowe Cypress lub Nightwatch).
Na przykład ścieżka użytkownika zawiera krok polegający na przejściu do adresu URL. Oto jak wygląda plik JSON:
{
"title": "order-a-coffee",
"steps": [
{
"type": "navigate",
"url": "https://coffee-cart.netlify.app/"
},
…
]
}
Możesz utworzyć wtyczkę stringify, aby przekształcić ten krok w JavaScript. Możesz też wyświetlić inne istniejące biblioteki, aby sprawdzić, jak to robią.
Na przykład ten fragment kodu pokazuje, jak WebdriverIO przekształca krok nawigacji:
export class StringifyPlugin extends PuppeteerStringifyExtension {
#appendStepType(out: LineWriter, step: Step, flow: UserFlow) {
switch (step.type) {
case 'navigate':
return out.appendLine(`await browser.url(${formatAsJSLiteral(step.url)})`)
…
}
Po uruchomieniu wtyczki z instrukcjami użytkownika wiersz nawigacyjny przekształca się w await browser.url(‘https://coffee-cart.netlify.app/’)
.
Dostosowywanie odtwarzania w Narzędziach deweloperskich
Rozszerzenia do odtwarzania umożliwiają odtwarzanie nagrań za pomocą usług i infrastruktury innych firm bez opuszczania narzędzia Dyktafon w Narzędziach dla programistów.
Jeśli chcesz utworzyć własne rozszerzenie do ponownego odtwarzania, zajrzyj do dokumentacji rozszerzeń do ponownego odtwarzania i zapoznaj się z przykładowym rozszerzeniem.
Publikowanie rozszerzeń do Chrome
Po dostosowaniu i przekształceniu przepływów danych możesz je spakować jako rozszerzenie Chrome i opublikować w Chrome Web Store.
Zapoznaj się z tą demonstracją oraz instrukcjami, by dowiedzieć się, jak debugować lokalnie i publikować rozszerzenie do Chrome.
Integracja z potokiem CI/CD
Można to zrobić na wiele sposobów i za pomocą wielu narzędzi. Oto przykład automatyzacji tego procesu za pomocą działań GitHub:
# .github/node.js.yml
name: Replay recordings
on:
push:
branches: [ "main" ]
schedule:
- cron: '30 12 * * *' # daily 12:30pm
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'
- run: npm install puppeteer
- run: npm run replay-all
- run: npm run start
W tym przykładzie obraz zostanie odtworzony, gdy:
- nowe zmiany są przesyłane do gałęzi
main
- codziennie o 12:30
Oprócz działań GitHub możesz też korzystać z integracji z ulubionymi dostawcami usług w chmurze. Otwórz tę prezentację, aby dowiedzieć się, jak za pomocą zadania Google Cloud Run wykonać równolegle do 10 000 przepływów użytkowników.
Podsumowanie
W tym poście omówiliśmy różne opcje eksportowania przepływów użytkowników do plików JSON, dostosowywania ponownego odtwarzania za pomocą PuppeteerReplayExtension
, przekształcania przepływów użytkowników za pomocą PuppeteerStringifyExtension
oraz integrowania ich w przepływach pracy CI.
Mamy nadzieję, że ten post dostarczył Ci pomysłów na to, jak korzystać z panelu Recorder i dostępnych w nim narzędzi, aby ułatwić sobie łączenie testów z projektami. Nie mogę się doczekać, aż zobaczę, co stworzysz!
Pobierz kanały podglądu
Rozważ użycie przeglądarki Chrome Canary, Dev lub Beta jako domyślnej przeglądarki dla programistów. Te kanały podglądu dają Ci dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim zrobią to użytkownicy.
Kontakt z zespołem Narzędzi deweloperskich w Chrome
Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.
- Prześlij nam sugestię lub opinię na crbug.com.
- Zgłoś problem z Narzędziami deweloperskimi, klikając Więcej opcji > Pomoc > Zgłoś problem z Narzędziami deweloperskimi.
- Wyślij tweeta do @ChromeDevTools.
- Dodaj komentarze do naszych filmów w YouTube Co nowego w Narzędziach deweloperskich lub Wskazówki dotyczące Narzędzi deweloperskich.