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

Otomatik test yazmanın bir geliştiricinin hayatındaki en eğlenceli şey olmadığını kabul edelim. Geliştiriciler olarak özellikler yazmak, hataları düzeltmek ve dünyayı iyileştirmek istiyoruz. Ancak iş akışlarımızda otomatik testler olmazsa 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 paneliyle kullanıcı akışlarını kaydedip oynatabilir, farklı üçüncü taraf uzantıları ve kitaplıkları aracılığıyla çeşitli biçimlere (ör. test komut dosyaları) aktarabilir, kullanıcı akışlarını Puppeteer Replay kitaplığıyla ö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'in yardımıyla kullanıcı akışlarınızı ö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 eğitimini ve video kılavuzunu inceleyin.

Kullanıcı işlemlerini dışa aktarma ve programatik olarak yeniden oynatma

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ığı, kullanılabilen kitaplıklardan biridir.

Puppeteer Replay ile tekrar oynatma

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"

Bu sayede, 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 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ılar ve sürümlerle yeniden 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 aktarma

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 aktarma

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

Ayrıca, halihazırda kullandığınız test araçları varsa kullanıcı akışlarını Cypress, Nightwatch, WebdriverIO, Testing Library gibi farklı test komut dosyalarına aktarmak için kullanabileceğiniz uzantılar vardır. Tam listeyi burada bulabilirsiniz. Bu sayede ekibinizle birlikte testleri daha hızlı yazmaya başlayabilirsiniz.

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

Bu test sağlayıcıların çoğu, uzantıların yanı sıra birden fazla JSON kullanıcı akışını programatik olarak dönüştürmenize yardımcı olmak için 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'den itibaren, kayıtları yeniden 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 oynatmayı yapılandırmak ve tekrar oynatma sonuçlarını görüntülemek için DevTools'a 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

Arka planda tüm uzantılar ve kitaplıklar Puppeteer Replay kitaplığının üzerine inşa edilir. 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ı işlemleri akışlarını yeniden oynatmayı özelleştirme

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ü almak ve _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 demo sürümünü indirip de 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.");
  }
}

Kodun kendisi oldukça açıklayıcıdır. 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ı işlemlerini dönüştürme

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

Örneğin, kullanıcı akışınızda bir URL'ye gitme adımı varsa 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'inde WebdriverIO'nun gezinme adımını nasıl dönüştürdüğü gösterilmektedir:


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/’) olarak çevrilir.

Geliştirici Araçları'ndaki yeniden oynatma deneyimini özelleştirme

Yeniden oynatma uzantıları, DevTools Kaydedici'den ayrılmadan üçüncü taraf hizmetleri ve altyapısını kullanarak kayıtları yeniden oynatmanızı sağlar.

Tarayıcı uzantılarıyla yeniden 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

Özelleştirip dönüştürdüğünüz kullanıcı akışlarını Chrome uzantısı olarak paketleyebilir ve 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 birden fazla yolu ve birçok aracı vardır. Bu süreci GitHub Actions ile otomatikleştirmeye dair bir örnek aşağıda verilmiştir: 

# .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 dosyası olarak dışa aktarma, PuppeteerReplayExtension ile yeniden oynatma işlemlerini özelleştirme, kullanıcı akışlarını PuppeteerStringifyExtension ile dönüştürme ve bunları CI iş akışlarınıza entegre etme ile ilgili farklı seçenekleri ele aldık.

Bu blog yayınının, test iş akışlarını projelerinize entegre etmeyi kolaylaştırmak için Kaydedici panelini ve sunulan araçları nasıl kullanabileceğiniz konusunda size bazı fikirler verdiğini umuyoruz. 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 özellikler ve değişiklikler ya da DevTools ile ilgili başka bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.