Chrome Geliştirici Araçları Kaydedici'nin ötesindeki kullanıcı akışlarını özelleştirin ve otomatikleştirin

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

Kabul edelim, otomatik test yazmak bir geliştiricinin hayatındaki en eğlenceli şey değildir. Geliştiriciler olarak özellikler yazmak, hataları düzeltmek ve dünyayı iyileştirmek istiyoruz. Ancak iş akışlarımızda otomatik testler olmadığında, uzun vadede işler oldukça "hatalı" olabilir. Bu nedenle, otomatik testler yazmanın da önemli olduğunu düşünüyoruz.

Chrome Geliştirici Araçları'ndaki Kaydedici panelini kullanarak kullanıcı akışlarını kaydedip tekrar oynatabilir, farklı üçüncü taraf uzantı ve kitaplıklar üzerinden çeşitli biçimlerde (örneğin, test komut dosyaları) dışa aktarabilir, Puppeteer Replay kitaplığıyla kullanıcı akışlarını özelleştirebilir ve mevcut iş akışlarınızla entegre edebilirsiniz.

Bu blog yayınında aşağıdaki konuları ele alacağız:

  • Kullanıcı akışlarını programatik olarak dışa aktarma ve tekrar oynatma.
  • Puppeteer Replay özelliğinin yardımıyla kullanıcı akışlarını özelleştirme
  • CI/CD iş akışlarınızla nasıl entegrasyon gerçekleştireceğiniz.

Bu blog yayınında Kaydedici ile ilgili temel bilgilere sahip olduğunuz varsayılmaktadır. Kaydedici'yi kullanmaya yeni başladıysanız başlamak için bu kısa tanıtım amaçlı eğitici içeriği ve video kılavuzunu takip edin.

Kullanıcı akışlarını dışa aktarıp programatik olarak tekrar oynatın

Kaydedici, varsayılan olarak bu kayıtları Puppeteer veya Puppeteer Replay komut dosyası ya da düz bir JSON dosyası olarak dışa aktarmanıza olanak tanır.

Dışa aktarma seçenekleri.

Kullanıcı akışlarını JSON dosyası olarak dışa aktardıktan sonra, bunları Kaydedici paneline geri aktarabilir ve tekrar oynatabilir veya tekrar oynatmak için harici kitaplıkları kullanabilirsiniz. Puppeteer Replay kitaplığı, kullanabileceğiniz kitaplıklardan biridir.

Puppeteer Replay ile tekrar oynayın

Puppeteer Replay'i yüklemek için depodaki talimatları uygulayın.

JSON kullanıcı akışlarınızı recordings klasörüne kaydettiğinizi (örneğin, demo projesi) varsayalım. Bir veya daha fazla kullanıcı akışını yürütmek için aşağıdaki komutu kullanabilirsiniz: 

# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json

# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json

İsteğe bağlı olarak, kayıtları çalıştırmak için bir npm komut dosyası ekleyebilirsiniz. Bu satırı package.json içindeki scripts alanına ekleyin:

"replay-all": "replay recordings"

Bununla birlikte, tüm kayıtları yeniden oynatmak için komut satırında npm run replay-all komutunu çalıştırabilirsiniz.

Kullanıcı akışları varsayılan olarak kullanıcı arayüzü olmadan tekrar oynatılır (gözetimsiz mod olarak da bilinir). Kullanıcı arayüzünü görmek istiyorsanız komutu çalıştırmadan önce PUPPETEER_HEADLESS ortam değişkenini "false" (yanlış) olarak ayarlayın.

PUPPETEER_HEADLESS=false npm run replay-all

Üçüncü taraf kitaplıklarla tekrar oynatma

Chrome tarayıcının dışında yeniden oynatmak için kullanabileceğiniz bazı üçüncü taraf kitaplıklar vardır. Kitaplıkların tam listesini burada bulabilirsiniz.

Örneğin TestCafe, uçtan uca bir test çerçevesidir. JSON kullanıcı akışlarını Safari ve diğer platformlarda tekrar oynatmayı destekler.

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

Öte yandan Saucelabs, bulut tabanlı bir test platformudur. JSON kullanıcı akışlarının bulutta farklı tarayıcı ve sürümlerde tekrar oynatılmasını destekler.

Aşağıda, Saucelabs'daki örnek bir yapılandırma dosyası verilmiştir. Demo deposuna göz atın.

apiVersion: v1alpha
kind: puppeteer-replay
suites:
  - name: "order a coffee"
    recordings: [ "recordings/order-a-coffee.json" ]
…

Kullanıcı akışlarını farklı uzantılarla dışa aktarın

Varsayılan seçeneklerin yanı sıra, kullanıcı akışlarını farklı biçimlere aktarmak için uzantılar yükleyebilirsiniz.

Kullanıcı akışlarını farklı uzantılarla dışa aktarın.

Örneğin, kullanıcı akışlarını WebPageTest özel komut dosyası olarak kaydedip dışa aktarabilirsiniz. Komut dosyası ile uygulamalarınızdaki çok adımlı kullanıcı akışlarının performansını test edebilirsiniz. Ancak bu senaryoları yazmak bazen zorlayıcı olabilir.

Buna ek olarak, zaten test araçlarınız varsa kullanıcı akışlarını Cypress, Nightwatch, WebdriverIO, Testing Library gibi farklı test komut dosyalarına aktaran uzantılar da vardır. Tam listeye buradan ulaşabilirsiniz. Bu sayede ekibinizle birlikte testleri daha hızlı yazmaya başlayabilirsiniz.

Programlı olarak farklı test komut dosyalarına dönüştürme

Uzantıların yanı sıra bu test sağlayıcılarının çoğu, birden fazla JSON kullanıcı akışını programatik olarak dönüştürmenize yardımcı olacak kitaplıklar da yayınlar.

Örneğin, kullanıcı akışlarını Cypress testlerine aktarmak için @cypress/chrome-recorder kitaplıklarını kullanın.

npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json

Kullanıcı akışlarını uzantılarla tekrar oynatma

Chrome 112 sürümünden itibaren artık kayıtları tekrar oynatmak için uzantıları kullanarak deneyiminizi iyileştirebilirsiniz. Bu uzantılar, Geliştirici Araçları'ndan ayrılmadan kayıtları tekrar oynatmak için üçüncü taraf hizmetlerini ve altyapıyı sorunsuz bir şekilde entegre etmenizi sağlar.

Tekrar oynatma uzantıları, uzantıların tekrar oynatma ve tekrar oynatma sonuçlarını yapılandırmak için Geliştirici Araçları'na bir panel eklemesine olanak tanır.

Başlamak için mevcut uzantıların listesini inceleyin veya kendi özel uzantınızı nasıl oluşturacağınızı öğrenin.

Kendi uzantılarınızı veya kitaplıklarınızı oluşturma

Perde arkasında tüm uzantılar ve kitaplıklar Puppeteer Replay kitaplığının temel alınarak oluşturulur. Puppeteer Replay, kullanıcı akışlarını tekrar oynatmanıza olanak tanımanın yanı sıra, tekrar oynatma işlemini özelleştirmenize veya dönüştürmenize olanak tanıyan API'ler de sunar.

Kullanıcı akışlarını özelleştirin, tekrar oynatın

Bir ekran görüntüsü eklentisi oluşturalım. Her kullanıcı akışı için şunları isteriz:

  • Her adımın sonunda ekran görüntüsü alıp bunu _screenshots klasörüne kaydetmek için.
  • Kullanıcı akışının yürütülmesi tamamlandığında mesaj çıkışı almak için.

Kod snippet'ini burada bulabilirsiniz. Bu demoyu indirip oynayabilirsiniz.

/* 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 kendini çok iyi ifade ediyor. Her adımdan sonra ekran görüntüsünü kaydetmek ve tüm adımlardan sonra bir mesaj kaydetmek için PuppeteerRunnerExtension API'nin kapsamını genişletiriz.

Dosyayı kaydettiğinizde, aşağıdaki komutu kullanarak bu uzantıyla kullanıcı akışlarını çalıştırabiliriz:

# 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

Çıkış şu şekildedir:

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.

Kullanıcı akışlarını dönüştürün

Kullanıcı akışını özelleştirmenin bir başka yolu da akışı farklı biçimlere (ör. Cypress veya Nightwatch test komut dosyaları) dönüştürmektir.

Örneğin, kullanıcı akışınız bir URL'ye gitme adımını içeriyor. JSON dosyası aşağıdaki gibi görünür:

{
  "title": "order-a-coffee",
  "steps": [
    {
      "type": "navigate",
      "url": "https://coffee-cart.netlify.app/"
    },
    …
  ]
}

Adımı JavaScript'e dönüştürmek için bir stringify eklentisi oluşturabilirsiniz. Bu işlemleri nasıl yaptıklarını görmek için mevcut diğer kitaplıkları da inceleyebilirsiniz.

Örneğin, aşağıdaki kod snippet'i WebdriverIO'nun gezinme adımını nasıl dönüştürdüğünü gösterir:


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)})`)
        …
  }

Eklentiyi kullanıcı akışlarıyla birlikte çalıştırdığınızda, gezinme satırı await browser.url(‘https://coffee-cart.netlify.app/’) diline çevrilir.

Geliştirici Araçları tekrar oynatma deneyimini özelleştirin

Tekrar oynatma uzantıları, üçüncü taraf hizmetleri ve altyapıyı kullanarak kayıtları tekrar oynatmanıza olanak tanır. Üstelik tüm bunları Geliştirici Araçları Kaydedici'den ayrılmadan yapabilirsiniz.

Tarayıcı uzantılarıyla tekrar oynatma deneyiminizi iyileştirin.

Kendi tekrar oynatma uzantınızı oluşturmak için tekrar oynatma uzantısı dokümanlarına bakın ve yol göstermesi için örnek bir uzantıyı inceleyin.

Chrome uzantılarını yayınlama

Kullanıcı akışlarını özelleştirdikten ve dönüştürdükten sonra, bunları bir Chrome uzantısı olarak paketleyip Chrome Web Mağazası'nda yayınlayabilirsiniz.

Yerel olarak hata ayıklamayı ve Chrome uzantısı yayınlamayı öğrenmek için bu demoya ve talimatlara göz atın.

CI/CD ardışık düzeninizle entegrasyon

Bunu yapmanın birçok yolu vardır ve pek çok araç mevcuttur. GitHub İşlemler ile bu işlemi otomatikleştirmeyle ilgili bir örneği burada bulabilirsiniz: 

# .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

Bu örnekte, şu durumlarda kullanıcı akışlarını tekrar oynatacağız:

  • yeni değişiklikler main dalına aktarılır
  • her gün saat 12:30'da

GitHub İşlemler'in dışında, sevdiğiniz bulut sağlayıcılarla da entegrasyon gerçekleştirebilirsiniz. Bu demoya göz atarak paralel olarak 10.000'e kadar kullanıcı akışını yürütmek için Google Cloud Run İşi'ni nasıl kullanabileceğinizi öğrenin.

Sonuç

Bu blog yayınında, kullanıcı akışlarını JSON dosyaları olarak dışa aktarmak, tekrar oynatmaları PuppeteerReplayExtension ile özelleştirmek, PuppeteerStringifyExtension ile kullanıcı akışlarını dönüştürmek ve bunları CI iş akışlarınıza entegre etmek için kullanabileceğiniz farklı seçenekleri ele aldık.

Bu blog yayınının, Kaydedici panelini ve test iş akışlarını projelerinize entegre etmeyi kolaylaştırmak için sağlanan araçlarla ilgili fikir verdiğini umuyorum. Geliştireceğiniz uygulamayı görmek için sabırsızlanıyoruz!

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

  • Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
  • Geliştirici Araçları'ndaki Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
  • @ChromeDevTools adresinden tweet atabilirsiniz.
  • Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.