Otomatik testler 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 test yapmadığımızda uzun vadede işler oldukça "hatalı" olabiliyor. Bu nedenle, otomatik testler yazmanın da önemli olduğunu düşünüyoruz.
Chrome Geliştirici Araçları'ndaki Recorder (Kaydedici) panelini kullanarak kullanıcı akışlarını kaydedip yeniden oynatabilir, bunları farklı üçüncü taraf uzantılar ve kitaplıklar üzerinden çeşitli biçimlere (ör. test komut dosyaları) aktarabilir, Puppeteer Replay kitaplığıyla kullanıcı akışlarını özelleştirebilir ve mevcut iş akışlarınıza entegre edebilirsiniz.
Bu blog yayınında şu konuları ele alacağız:
- Kullanıcı akışlarının programatik olarak dışa aktarılması ve yeniden oynatılması.
- Puppeteer Replay'in yardımıyla kullanıcı işlemleri akışlarınızı özelleştirme.
- CI/CD iş akışlarınızla entegrasyon.
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ğiticisini ve video kılavuzunu takip edin.
Kullanıcı işlemleri akışlarını dışa aktarın ve programlı bir şekilde 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ışını JSON dosyaları olarak dışa aktardıktan sonra, kaydını Kaydedici paneline geri aktarabilir ve tekrar oynatabilir ya da yeniden oynatmak için harici kitaplıklar kullanabilirsiniz. Puppeteer Replay kitaplığı, kullanılabilen 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 (ör. demo projesi) varsayalım. Bir veya daha fazla kullanıcı akışı 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.
Varsayılan olarak kullanıcı akışı olmadan kullanıcı işlemleri akışı tekrarı (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ış) değerine ayarlayın.
PUPPETEER_HEADLESS=false npm run replay-all
Üçüncü taraf kitaplıklarla tekrar oynatma
Chrome tarayıcısı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 daha fazlasıyla yeniden 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
Saucelabs ise bulut tabanlı bir test platformudur. JSON kullanıcı akışlarını bulutta farklı tarayıcılar ve sürümlerle tekrar oynatmayı destekler.
Saucelabs'daki örnek bir yapılandırma dosyasını aşağıda bulabilirsiniz. Demo deposuna göz atın.
apiVersion: v1alpha
kind: puppeteer-replay
suites:
- name: "order a coffee"
recordings: [ "recordings/order-a-coffee.json" ]
…
Farklı uzantılara sahip kullanıcı akışlarını dışa aktarma
Varsayılan seçeneklerin dışında, kullanıcı akışlarını farklı biçimlere aktarmak için uzantıları da yükleyebilirsiniz.
Örneğin, kullanıcı akışlarını WebPageTest özel komut dosyası olarak kaydedebilir ve dışa aktarabilirsiniz. Komut dosyasıyla, uygulamalarınızdaki çok adımlı kullanıcı akışlarının performansını test edebilirsiniz. Ancak bu senaryoları yazmak bazen zor olabilir.
Ayrıca, halihazırda kullandığınız test araçları varsa kullanıcı akışlarını Cypress, Nightwatch, WebdriverIO, Test Library gibi farklı test komut dosyalarına aktaracak uzantılar da mevcuttur. Tam listeyi burada bulabilirsiniz. Bu sayede ekibinizle birlikte daha hızlı test yazmaya başlayabilirsiniz.
Farklı test komut dosyalarına programatik olarak 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ı 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
Uzantılarla kullanıcı akışlarını tekrar oynatma
Chrome 112 sürümünden itibaren, kayıtları tekrar oynatmak için uzantıları kullanarak deneyiminizi geliştirebilirsiniz. Bu uzantılar, Geliştirici Araçları'ndan ayrılmadan kayıtları yeniden oynatmak için üçüncü taraf hizmetlerini ve altyapıyı sorunsuz bir şekilde entegre etmenize olanak tanır.
Başlamak için kullanılabilir 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şturun
Perde arkasında tüm uzantılar ve kütüphaneler Puppeteer Replay kitaplığının üzerine inşa edilmiştir. Puppeteer Replay, kullanıcı akışlarını tekrar oynatmanıza olanak tanımanın yanı sıra kullanıcı akışı tekrarını özelleştirmenizi veya dönüştürmenizi sağlayan API'ler sunar.
Kullanıcı işlemleri akışını tekrar oynatmayı özelleştirin
Şimdi bir ekran görüntüsü eklentisi oluşturalım. Her bir kullanıcı işlemleri akışı için şunları istiyoruz:
- Her adımın sonunda ekran görüntüsü alıp
_screenshotsklasörüne kaydetmek için. - Kullanıcı işlemleri akışı yürütülmesi tamamlandığında mesaj çıkışı almak için.
Kod snippet'i şöyledir. 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.");
}
}
Kodun kendisi oldukça etkileyici. Her adımdan sonra ekran görüntüsünü kaydetmek ve tüm adımlardan sonra bir mesaj kaydetmek için PuppeteerRunnerExtension API'sinin kapsamını genişletiyoruz.
Dosyayı kaydedin. Ardından aşağıdaki komutu kullanarak bu uzantıyla kullanıcı akışları ç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ürme
Kullanıcı akışını özelleştirmenin bir başka yolu da akışı farklı biçimlere (örneğin, Servi veya Gece Saati test komut dosyaları) dönüştürmektir.
Örneğin, kullanıcı akışınız bir URL'ye gitmek için bir adım içeriyor. JSON dosyası şu şekilde 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. Bunu nasıl yaptıklarını görmek için mevcut diğer kitaplıkları da görüntüleyebilirsiniz.
Ö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 ç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ı, Geliştirici Araçları Kaydedici'den ayrılmadan üçüncü taraf hizmetleri ve altyapıları kullanarak kayıtları yeniden oynatma imkanı sunar.
Kendi tekrar oynatma uzantınızı oluşturmak istiyorsanız yeniden oynatma uzantısı dokümanlarına bakın ve yol gösterici örnek bir uzantıyı inceleyin.
Chrome uzantılarını yayınlama
Kullanıcı akışlarını özelleştirip dönüştürdükten sonra bunları Chrome uzantısı olarak paketleyebilir ve Chrome Web Mağazası'nda yayınlayabilirsiniz.
Yerel olarak hata ayıklamayı ve Chrome uzantısını yayınlamayı öğrenmek için bu demoya ve talimatlara göz atın.
CI/CD ardışık düzeninizle entegrasyon
Bunu yapmanın birden çok yolu vardır ve kullanabileceğiniz birçok araç vardır. Aşağıda, GitHub Actions ile bu işlemi otomatikleştirmeyle ilgili bir örnek 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ışını tekrar oynatacağız:
- yeni değişiklikler
maindalına aktarılır - her gün saat 12:30'da
GitHub Actions'ın yanı sıra favori bulut sağlayıcılarınızla da entegrasyon yapabilirsiniz. Paralel olarak 10.000'e kadar kullanıcı akışı yürütmek için Google Cloud Run İşi'ni nasıl kullanabileceğinizi görmek için bu demoya gidin.
Sonuç
Bu blog yayınında, kullanıcı akışlarını JSON dosyaları olarak dışa aktarma, PuppeteerReplayExtension ile tekrar oynatmaları özelleştirme, PuppeteerStringifyExtension ile kullanıcı akışlarını dönüştürme 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 nasıl kullanabileceğiniz ve bir test iş akışını projelerinize entegre etmeyi kolaylaştırmak için sağlanan araçlarla ilgili 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, Yeni geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları ile Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz.
Chrome Geliştirici Araçları ekibiyle iletişime geçme
Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.
- crbug.com adresinden bize öneri veya geri bildirim gönderin.
- Geliştirici Araçları'nda Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
- @ChromeDevTools adresine tweet gönderin.
- Geliştirici Araçları YouTube videoları bölümündeki yenilikler veya Geliştirici Araçları İpuçları YouTube videoları bölümlerimize yorum yapın.