Dostosuj i automatyzuj przepływy użytkowników poza Chrome DevTools Recorder

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

Przyznajmy, że pisanie zautomatyzowanych testów nie jest najciekawszą rzeczą w życiu programisty. Chcemy tworzyć funkcje, naprawiać błędy i ulepszać świat. Jednak bez automatycznego testowania w naszych przepływach pracy na dłuższą metę wszystko może wykazywać pewne „błędy”. Uważamy więc, że pisanie testów zautomatyzowanych jest ważne.

Panel Dyktafon w Narzędziach deweloperskich w Chrome pozwala rejestrować i odtwarzać wzorce użytkownika, eksportować je do różnych formatów (na przykład skryptów testowych) przy użyciu różnych rozszerzeń i bibliotek innych firm, dostosowywać przepływy użytkowników za pomocą biblioteki Puppeteer Replay oraz integrować je z dotychczasowymi przepływami pracy.

W tym poście omówimy następujące tematy:

  • Jak automatycznie eksportować i odtwarzać dane o ruchu użytkownika.
  • Jak dostosować zachowania użytkowników za pomocą Puppeteer Replay.
  • informacje o integracji 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 Dyktafonu, na początek zapoznaj się z tym krótkim samouczkiem i przewodnikiem 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.

Opcje eksportu.

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.

Powtórka z Puppeteer Replay

Postępuj zgodnie z instrukcjami w repozytorium, aby zainstalować Puppeteer Replay.

Załóżmy, że w folderze recordings (np. demo project) zapisujesz przepływy użytkowników w formacie JSON. Aby wykonać co najmniej 1 przepływy użytkowników, 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"

Dzięki temu możesz uruchomić polecenie npm run replay-all w wierszu poleceń, aby ponownie odtworzyć wszystkie nagrania.

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ść Fałsz.

PUPPETEER_HEADLESS=false npm run replay-all

Ponowne odtwarzanie w bibliotekach innych firm

Istnieją biblioteki innych firm, których możesz używać do odtwarzania treści poza przeglądarką Chrome. Oto pełna lista bibliotek.

Na przykład TestCafe to platforma do kompleksowego testowania. Obsługuje również odtwarzanie wzorcó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

Saucelabs to natomiast platforma testowa działająca w 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 schematów użytkowników z różnymi rozszerzeniami

Oprócz opcji domyślnych możesz też zainstalować rozszerzenia, aby eksportować informacje o ruchu użytkowników do różnych formatów.

Eksportuj schematy użytkowników z różnymi rozszerzeniami.

Możesz na przykład rejestrować i eksportować przepływy użytkowników jako skrypt niestandardowy WebPageTest. Za pomocą tego skryptu możesz przetestować wydajność wieloetapowych przepływów użytkownikó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. Może to pomóc Tobie i Twojemu zespołowi szybciej zacząć pisać testy.

Automatyczne przekształcanie na różne skrypty testowe

Większość dostawców testów publikuje też biblioteki, aby ułatwić automatyczną konwersję wielu przepływów użytkowników w formacie JSON.

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.

Rozszerzenia odtwarzania ponownie umożliwiają rozszerzeniom dodawanie do Narzędzi deweloperskich panelu umożliwiającego skonfigurowanie ponownego odtwarzania i wyświetlania wyników.

Na początek przejrzyj listę dostępnych rozszerzeń lub dowiedz się, jak utworzyć własne rozszerzenie niestandardowe.

Tworzenie własnych rozszerzeń lub bibliotek

W rzeczywistości wszystkie rozszerzenia i biblioteki są tworzone na bibliotece Puppeteer Replay. Puppeteer Replay oferuje interfejsy API, które umożliwiają dostosowanie lub przekształcanie ścieżek użytkowników.

Dostosowywanie odtwarzania wzorca przeglądania

Stwórzmy 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. Wtedy będziemy mogli uruchomić przepływy użytkowników z tym rozszerzeniem za pomocą 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 na dostosowanie procesu użytkownika jest przekształcenie go na różne formaty (np. za pomocą cyprysu lub skryptu testowego Nightwatch).

Na przykład wzorzec przeglądania zawiera krok prowadzący do adresu URL. Tak 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/’).

Dostosuj ponowne odtwarzanie w Narzędziach deweloperskich

Rozszerzenia odtwarzania umożliwiają ponowne odtwarzanie nagrań za pomocą usług i infrastruktur innych firm – a wszystko to bez opuszczania Dyktafonu w Narzędziach deweloperskich.

Ulepsz ponowne odtwarzanie dzięki rozszerzeniom przeglądarki.

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 wzorców użytkownika możesz je spakować jako rozszerzenia do 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

Istnieje wiele sposobów, aby to zrobić. Dostępnych jest 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 obraz zostanie odtworzony, gdy:

  • nowe zmiany zostały przekazane 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.

Mam nadzieję, że ten post podsunie Ci pomysły na temat korzystania z panelu Dyktafon i udostępnionych narzędzi, które ułatwią Ci zintegrowanie przepływu pracy z projektami. Nie mogę się doczekać, aż zobaczę, co stworzysz!

Pobierz kanały podglądu

Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają 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 użytkownicy ją zobaczą.

Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome

Użyj 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.
  • Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji   Więcej > Pomoc > Zgłoś problemy z Narzędziami deweloperskimi w Narzędziach deweloperskich.
  • Opublikuj tweeta na stronie @ChromeDevTools.
  • Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.