Trzeba przyznać, że tworzenie testów zautomatyzowanych nie jest najfajniejsze w życiu programisty. Jako deweloperzy chcemy pisać funkcje, naprawiać błędy i ulepszać świat. Jednak gdy nie stosujemy automatycznego testowania w naszych przepływach pracy, na dłuższą metę wszystko może stać się „błędne”. Dlatego uważamy, że ważne jest tworzenie testów automatycznych.
Panel Dyktafon w Narzędziach deweloperskich w Chrome pozwala nagrywać i odtwarzać schematy działań użytkowników, eksportować je do różnych formatów (np. skryptów testowych) za pomocą różnych rozszerzeń i bibliotek innych firm, dostosowywać przepływy pracy użytkowników za pomocą biblioteki Puppeteer Replay oraz integrować je z dotychczasowymi przepływami pracy.
W tym poście omówimy:
- Jak eksportować i ponownie odtwarzać schematy użytkowników w sposób zautomatyzowany.
- Jak dostosować schematy działań użytkowników za pomocą aplikacji Puppeteer Replay.
- Integracja z przepływami pracy CI/CD.
W tym poście zakładamy, że znasz już podstawy Dyktafonu. Jeśli dopiero zaczynasz korzystać z Dyktafonu, na początek skorzystaj z tego krótkiego samouczka i przewodnika wideo.
Eksportuj schematy działań użytkowników i odtwarzaj je ponownie automatycznie
Domyślnie Dyktafon umożliwia wyeksportowanie tych nagrań jako skryptu Puppeteer, Puppeteer Replay lub zwykłego pliku JSON.
Po wyeksportowaniu przepływów użytkowników jako plików JSON możesz zaimportować je z powrotem do panelu Dyktafon i ponownie je odtworzyć lub użyć bibliotek zewnętrznych. Jedna z dostępnych bibliotek to Puppeteer Replay.
Odtwórz ponownie
Aby zainstalować Puppeteer Replay, postępuj zgodnie z instrukcjami podanymi w repozytorium.
Załóżmy, że zapisujesz przepływy użytkowników JSON w folderze recordings (np. projekt demonstracyjny), za pomocą tego polecenia możesz wykonać co najmniej 1 przepływ użytkowników:
# 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 w polu scripts w package.json:
"replay-all": "replay recordings"
Następnie możesz uruchomić polecenie npm run replay-all w wierszu poleceń, aby ponownie odtworzyć wszystkie nagrania.
Domyślnie schematy użytkownika są odtwarzane ponownie bez interfejsu użytkownika (jest to tzw. tryb bez interfejsu graficznego). Jeśli chcesz zobaczyć interfejs użytkownika, przed uruchomieniem polecenia ustaw zmienną środowiskową PUPPETEER_HEADLESS na fałsz.
PUPPETEER_HEADLESS=false npm run replay-all
Ponowne odtwarzanie przy użyciu bibliotek innych firm
Istnieją biblioteki innych firm, których możesz użyć do odtwarzania treści poza przeglądarką Chrome. Oto pełna lista bibliotek.
Na przykład TestCafe to kompleksowa platforma do testowania. Obsługuje ponowne odtwarzanie przepływów użytkownika JSON w Safari i nie tylko.
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
Natomiast Saucelabs to platforma testowa oparta na chmurze. 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 przepływów użytkowników za pomocą różnych rozszerzeń
Oprócz opcji domyślnych możesz też zainstalować rozszerzenia, aby eksportować schematy działań użytkowników do różnych formatów.
Możesz na przykład rejestrować i eksportować przepływy użytkowników jako niestandardowy skrypt WebPageTest. Skrypt pozwala przetestować wydajność wieloetapowych przepływów użytkowników w aplikacjach. Napisanie tych scenariuszy bywa jednak trudne.
Jeśli masz już narzędzia do testowania, możesz skorzystać z rozszerzeń do eksportowania przepływów użytkowników do różnych skryptów testowych, takich jak Cypress, Nightwatch, WebdriverIO czy Biblioteka testowania. Oto pełna lista. Dzięki temu Ty i Twój zespół możecie szybciej zacząć pisać testy.
Przekształć automatycznie w różne skrypty testowe
Oprócz rozszerzeń większość tych dostawców testów publikuje biblioteki, które ułatwiają programową konwersję wielu przepływów użytkowników JSON.
Na przykład użyj bibliotek @cypress/chrome-recorder, aby eksportować przepływy użytkowników do testów Cypress.
npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json
Odtwarzanie schematów działań użytkowników za pomocą rozszerzeń
Od wersji 112 możesz zwiększyć komfort korzystania z usługi dzięki rozszerzeniom do ponownego odtwarzania nagrań. Te rozszerzenia pozwalają na płynną integrację usług i infrastruktury innych firm do odtwarzania nagrań bez opuszczania Narzędzi deweloperskich.
Aby rozpocząć, przejrzyj listę dostępnych rozszerzeń lub dowiedz się, jak utworzyć własne rozszerzenie niestandardowe.
Tworzenie własnych rozszerzeń lub bibliotek
Poza tym wszystkie rozszerzenia i biblioteki są zbudowane na bazie biblioteki Puppeteer Replay. Oprócz możliwości ponownego odtwarzania przepływów użytkowników Puppeteer Replay udostępnia interfejsy API, które umożliwiają dostosowanie lub przekształcanie działań użytkowników.
Dostosowywanie ponownego odtwarzania przepływu użytkowników
Utwórzmy wtyczkę do zrzutów ekranu. Zależy nam na tym, aby dla każdego procesu działań użytkownika:
- Aby zrobić zrzut ekranu na końcu każdego kroku i zapisać go w folderze
_screenshots. - Wyświetlanie komunikatu po zakończeniu wykonywania instrukcji użytkownika.
Oto fragment kodu. Możesz też pobrać tę wersję demonstracyjną i się z nią pobawić.
/* 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 jest dość ekspresyjny. Rozszerzamy interfejs API PuppeteerRunnerExtension, aby po każdym kroku zapisywać zrzut ekranu i rejestrować komunikat po wykonaniu wszystkich czynności.
Zapisz plik, abyśmy mogli uruchomić przepływy użytkowników z tym rozszerzeniem za pomocą następującego 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
Oto wynik:
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 schematów użytkowników
Innym sposobem dostosowywania działań użytkownika jest przekształcenie go w różne formaty (np. skrypty Cypress lub Nightwatch).
Na przykład w przepływie użytkowników występuje 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/"
},
…
]
}
Aby przekształcić krok na kod JavaScript, możesz utworzyć wtyczkę stringify. Możesz też wyświetlić inne biblioteki, aby dowiedzieć się, 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)})`)
…
}
Gdy uruchamiasz wtyczkę zgodnie ze wskazówkami użytkownika, wiersz nawigacyjny przekłada się na język await browser.url(‘https://coffee-cart.netlify.app/’).
Dostosuj odtwarzanie w Narzędziach deweloperskich
Rozszerzenia umożliwiające ponowne odtwarzanie nagrań pozwalają na odtwarzanie nagrań przy użyciu usług i infrastruktury firm zewnętrznych bez konieczności opuszczania Dyktafonu z Narzędziami deweloperskimi.
Aby utworzyć własne rozszerzenie do ponownego odtwarzania, zapoznaj się z dokumentacją rozszerzenia do odtwarzania ponownego odtwarzania i wskazówkami na temat przykładowego rozszerzenia.
Publikowanie rozszerzeń do Chrome
Po dostosowaniu i przekształceniu procesów użytkownika możesz utworzyć pakiet z takimi plikami jako rozszerzenie do Chrome i opublikować je w Chrome Web Store.
Zapoznaj się z tą prezentacją i instrukcjami, aby dowiedzieć się, jak debugować lokalnie i publikować rozszerzenie do Chrome.
Integracja z potokiem CI/CD
Możesz to zrobić na wiele sposobów – dostępnych jest też wiele 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 ponownie odtwarzamy schematy działań użytkowników, gdy:
- nowe zmiany wypchnij do gałęzi
main - codziennie o 12:30
Oprócz działań GitHub możesz przeprowadzać integrację z ulubionymi dostawcami usług w chmurze. W tej prezentacji zobaczysz,jak za pomocą zadania Google Cloud Run uruchomić równolegle nawet 10 tys. przepływów użytkowników.
Podsumowanie
W tym poście na blogu omówiliśmy różne opcje eksportowania przepływów użytkowników do plików JSON, dostosowywania ponownych odtworzeń za pomocą PuppeteerReplayExtension, przekształcania przepływów użytkowników w PuppeteerStringifyExtension i integrowania ich z procesami CI.
Mam nadzieję, że ten post na blogu zawierał kilka pomysłów na to, jak wykorzystać panel Dyktafonu i udostępnione narzędzia, aby ułatwić integrację procesu testowania z projektami. Nie mogę się doczekać, by zobaczyć, co stworzysz!
Pobieranie kanałów podglądu
Jako domyślnej przeglądarki programistycznej możesz użyć Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, testują nowoczesne interfejsy API platform internetowych oraz wykrywają problemy w witrynie, zanim zrobią to użytkownicy.
Kontakt z zespołem Narzędzi deweloperskich w Chrome
Użyj tych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkich innych sprawach związanych z Narzędziami dla programistów.
- Sugestię lub opinię możesz przesłać na stronie crbug.com.
- Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji
> Pomoc > Zgłoś problemy z Narzędziami deweloperskimi. - zatweetować na @ChromeDevTools.
- Komentarze do filmów o narzędziach dla deweloperów w YouTube lub filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.