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 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 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.
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.
Ö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.
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.
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ı sorunlarını bildirmek için Diğer seçenekler'i
> Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
- @ChromeDevTools adresinden tweet atabilirsiniz.
- Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.