시각적 테스팅
어떤 기능을 제공하나요?
WebdriverIO는 다음 환경에서 화면, 요소 또는 전체 페이지에 대한 이미지 비교를 제공합니다:
- 🖥️ 데스크톱 브라우저 (Chrome / Firefox / Safari / Microsoft Edge)
- 📱 모바일 / 태블릿 브라우저 (Android 에뮬레이터의 Chrome / iOS 시뮬레이터의 Safari / 시뮬레이터 / 실제 기기) via Appium
- 📱 네이티브 앱 (Android 에뮬레이터 / iOS 시뮬레이터 / 실제 기기) via Appium (🌟 신규 🌟)
- 📳 하이브리드 앱 via Appium
경량 WebdriverIO 서비스인 @wdio/visual-service
를 통해 제공됩니다.
다음과 같은 기능을 사용할 수 있습니다:
- 화면/요소/전체 페이지 스크린샷을 기준 이미지와 저장하거나 비교
- 기준 이미지가 없을 때 자동으로 기준 이미지 생성
- 사용자 지정 영역 차단 및 비교 중 상태바와 툴바(모바일 전용)를 자동으로 제외
- 요소 크기 스크린샷 확대
- 웹사이트 비교 중 텍스트 숨기기:
- 안정성 향상 및 폰트 렌더링 불안정성 방지
- 웹사이트의 레이아웃에만 집중
- 다양한 비교 방법 및 더 읽기 쉬운 테스트를 위한 추가 매처
- 키보드로 탭 이동 지원을 웹사이트에서 확인하기, 웹사이트에서 탭 이동 참조
- 그리고 더 많은 기능, 서비스 및 메소드 옵션 참조
이 서비스는 모든 브라우저/기기에 필요한 데이터와 스크린샷을 가져오는 경량 모듈입니다. 비교 기능은 ResembleJS에서 제공됩니다. 온라인에서 이미지를 비교하려면 온라인 도구를 확인하세요.
saveScreen
, saveElement
, checkScreen
, checkElement
메소드와 toMatchScreenSnapshot
, toMatchElementSnapshot
매처는 네이티브 앱/컨텍스트에서 사용할 수 있습니다.
하이브리드 앱에서 사용하려면 서비스 설정에서 isHybridApp:true
속성을 사용하세요.
설치
@wdio/visual-service
를 package.json
에 dev-dependency로 유지하는 것이 가장 쉬운 방법입니다:
npm install --save-dev @wdio/visual-service
사용법
@wdio/visual-service
는 일반 서비스로 사용할 수 있습니다. 다음과 같이 구성 파일에서 설정할 수 있습니다:
import path from "node:path";
// wdio.conf.ts
export const config = {
// ...
// =====
// Setup
// =====
services: [
[
"visual",
{
// 일부 옵션, 자세한 내용은 문서 참조
baselineFolder: path.join(process.cwd(), "tests", "baseline"),
formatImageName: "{tag}-{logName}-{width}x{height}",
screenshotPath: path.join(process.cwd(), "tmp"),
savePerInstance: true,
// ... 더 많은 옵션
},
],
],
// ...
};
더 많은 서비스 옵션은 여기에서 찾을 수 있습니다.
WebdriverIO 구성에서 설정한 후, 테스트에 시각적 검증을 추가할 수 있습니다.
기능
시각적 테스팅 모듈을 사용하기 위해 capabilities에 추가 옵션을 추가할 필요는 없습니다. 그러나 일부 경우에는 logName
과 같은 추가 메타데이터를 시각적 테스트에 추가하고 싶을 수 있습니다.
logName
을 사용하면 각 capability에 사용자 지정 이름을 할당할 수 있으며, 이는 이미지 파일 이름에 포함될 수 있습니다. 이는 다양한 브라우저, 장치 또는 구성에서 촬영한 스크린샷을 구분하는 데 특히 유용합니다.
이를 활성화하려면 capabilities
섹션에서 logName
을 정의하고 Visual Testing 서비스의 formatImageName
옵션에서 참조하도록 설정하세요. 다음과 같이 설정할 수 있습니다:
import path from "node:path";
// wdio.conf.ts
export const config = {
// ...
// =====
// Setup
// =====
capabilities: [
{
browserName: 'chrome',
'wdio-ics:options': {
logName: 'chrome-mac-15', // Chrome용 사용자 지정 로그 이름
},
}
{
browserName: 'firefox',
'wdio-ics:options': {
logName: 'firefox-mac-15', // Firefox용 사용자 지정 로그 이름
},
}
],
services: [
[
"visual",
{
// 일부 옵션, 자세한 내용은 문서 참조
baselineFolder: path.join(process.cwd(), "tests", "baseline"),
screenshotPath: path.join(process.cwd(), "tmp"),
// 아래 형식은 capabilities의 `logName`을 사용합니다
formatImageName: "{tag}-{logName}-{width}x{height}",
// ... 더 많은 옵션
},
],
],
// ...
};
작동 방식
-
logName
설정:capabilities
섹션에서 각 브라우저나 장치에 고유한logName
을 할당합니다. 예를 들어,chrome-mac-15
는 macOS 버전 15에서 실행되는 Chrome에서의 테스트를 식별합니다.
-
사용자 지정 이미지 이름 지정:
-
formatImageName
옵션은 스크린샷 파일 이름에logName
을 통합합니다. 예를 들어,tag
가 homepage이고 해상도가1920x1080
인 경우 결과 파일 이름은 다음과 같을 수 있습니다:homepage-chrome-mac-15-1920x1080.png
-
-
사용자 지정 이름 지정의 이점:
- 서로 다른 브라우저나 장치의 스크린샷을 구분하는 것이 훨씬 쉬워져 기준선을 관리하고 불일치를 디버깅할 때 특히 유용합니다.
-
기본값에 대한 참고 사항:
capabilities
에logName
이 설정되지 않은 경우,formatImageName
옵션은 파일 이름에 빈 문자열로 표시됩니다(homepage--15-1920x1080.png
)
WebdriverIO MultiRemote
MultiRemote도 지원합니다. 이를 올바르게 작동시키려면 아래에서 볼 수 있듯이 capabilities에 wdio-ics:options
를 추가해야 합니다. 이렇게 하면 각 스크린샷이 고유한 이름을 갖게 됩니다.
테스트 작성은 testrunner를 사용하는 것과 비교하여 다르지 않습니다.
// wdio.conf.js
export const config = {
capabilities: {
chromeBrowserOne: {
capabilities: {
browserName: "chrome",
"goog:chromeOptions": {
args: ["disable-infobars"],
},
// 이것!!!
"wdio-ics:options": {
logName: "chrome-latest-one",
},
},
},
chromeBrowserTwo: {
capabilities: {
browserName: "chrome",
"goog:chromeOptions": {
args: ["disable-infobars"],
},
// 이것!!!
"wdio-ics:options": {
logName: "chrome-latest-two",
},
},
},
},
};
프로그래밍 방식으로 실행
다음은 remote
옵션을 통해 @wdio/visual-service
를 사용하는 최소한의 예입니다:
import { remote } from "webdriverio";
import VisualService from "@wdio/visual-service";
let visualService = new VisualService({
autoSaveBaseline: true,
});
const browser = await remote({
logLevel: "silent",
capabilities: {
browserName: "chrome",
},
});
// "Start" 서비스로 사용자 정의 명령을 `browser`에 추가
visualService.remoteSetup(browser);
await browser.url("https://webdriver.io/");
// 스크린샷만 저장하려면 이 방법 사용
await browser.saveFullPageScreen("examplePaged", {});
// 검증하려면 이 방법 사용. 두 메서드를 결합할 필요 없음(FAQ 참조)
await browser.checkFullPageScreen("examplePaged", {});
await browser.deleteSession();