Chuyển đến nội dung chính

Cho Ứng dụng Web

Tích hợp các bài kiểm thử WebdriverIO của bạn với Percy​

Trước khi tích hợp, bạn có thể khám phá hướng dẫn xây dựng mẫu của Percy cho WebdriverIO. Tích hợp các bài kiểm thử tự động WebdriverIO của bạn với BrowserStack Percy và đây là tổng quan các bước tích hợp:

Bước 1: Tạo một dự án Percy​

Đăng nhập vào Percy. Trong Percy, tạo một dự án loại Web, sau đó đặt tên cho dự án. Sau khi dự án được tạo, Percy sẽ tạo ra một token. Hãy ghi lại token đó. Bạn phải sử dụng nó để thiết lập biến môi trường trong bước tiếp theo.

Để biết chi tiết về cách tạo dự án, xem Tạo dự án Percy.

Bước 2: Thiết lập token dự án như một biến môi trường​

Chạy lệnh sau để thiết lập PERCY_TOKEN như một biến môi trường:

export PERCY_TOKEN="<your token here>"   // macOS or Linux
$Env:PERCY_TOKEN="<your token here>"   // Windows PowerShell
set PERCY_TOKEN="<your token here>"    // Windows CMD

Bước 3: Cài đặt các phụ thuộc của Percy​

Cài đặt các thành phần cần thiết để thiết lập môi trường tích hợp cho bộ kiểm thử của bạn.

Để cài đặt các phụ thuộc, chạy lệnh sau:

npm install --save-dev @percy/cli @percy/webdriverio

Bước 4: Cập nhật kịch bản kiểm thử của bạn​

Nhập thư viện Percy để sử dụng phương thức và thuộc tính cần thiết để chụp ảnh màn hình. Ví dụ sau sử dụng hàm percySnapshot() trong chế độ bất đồng bộ:

import percySnapshot from '@percy/webdriverio';
describe('webdriver.io page', () => {
  it('should have the right title', async () => {
    await browser.url('https://webdriver.io');
    await expect(browser).toHaveTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js');
    await percySnapshot('webdriver.io page');
  });
});

Khi sử dụng WebdriverIO trong chế độ độc lập, cung cấp đối tượng trình duyệt làm đối số đầu tiên cho hàm percySnapshot:

import { remote } from 'webdriverio'

import percySnapshot from '@percy/webdriverio';

const browser = await remote({
  logLevel: 'trace',
  capabilities: {
    browserName: 'chrome'
  }
});

await browser.url('https://duckduckgo.com');
const inputElem = await browser.$('#search_form_input_homepage');
await inputElem.setValue('WebdriverIO');
const submitBtn = await browser.$('#search_button_homepage');
await submitBtn.click();
// the browser object is required in standalone mode
percySnapshot(browser, 'WebdriverIO at DuckDuckGo');
await browser.deleteSession();

Các đối số của phương thức snapshot là:

percySnapshot(name[, options])

Chế độ độc lập​

percySnapshot(browser, name[, options])
  • browser (bắt buộc) - Đối tượng trình duyệt WebdriverIO
  • name (bắt buộc) - Tên snapshot; phải là duy nhất cho mỗi snapshot
  • options - Xem các tùy chọn cấu hình cho từng snapshot

Để tìm hiểu thêm, xem Percy snapshot.

Bước 5: Chạy Percy​

Chạy các bài kiểm thử của bạn bằng lệnh percy exec như sau:

Nếu bạn không thể sử dụng lệnh percy:exec hoặc muốn chạy các bài kiểm thử bằng tùy chọn chạy IDE, bạn có thể sử dụng các lệnh percy:exec:start và percy:exec:stop. Để tìm hiểu thêm, truy cập Chạy Percy.

percy exec -- wdio wdio.conf.js
[percy] Percy has started!
[percy] Created build #1: https://percy.io/[your-project]
[percy] Running "wdio wdio.conf.js"
...
[...] webdriver.io page
[percy] Snapshot taken "webdriver.io page"
[...]    ✓ should have the right title
...
[percy] Stopping percy...
[percy] Finalized build #1: https://percy.io/[your-project]
[percy] Done!

Truy cập các trang sau để biết thêm chi tiết:​

Tài nguyênMô tả
Tài liệu chính thứcTài liệu WebdriverIO của Percy
Xây dựng mẫu - Hướng dẫnHướng dẫn WebdriverIO của Percy
Video chính thứcKiểm thử trực quan với Percy
BlogGiới thiệu Visual Reviews 2.0

Welcome! How can I help?

WebdriverIO AI Copilot