메인 컨텐츠로 건너뛰기

테스트 출력

정보

이 WebdriverIO 데모 사이트는 이미지 출력 예제에 사용되었습니다.

enableLayoutTesting​

이것은 서비스 옵션과 메소드 레벨 모두에서 설정할 수 있습니다.

// wdio.conf.(js|ts)
export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            'visual',
            {
                enableLayoutTesting: true
            }
        ]
    ]
    // ...
}

서비스 옵션의 이미지 출력은 아래 메소드와 동일합니다.

이미지 출력​

await browser.saveElement(".features_vqN4", "example-element-tag", {enableLayoutTesting: true})
// Or
await browser.checkElement(".features_vqN4", "example-element-tag", {enableLayoutTesting: true})

saveElement Desktop

save(Screen/Element/FullPageScreen)​

콘솔 출력​

save(Screen/Element/FullPageScreen) 메소드는 실행 후 다음 정보를 제공합니다:

const saveResult = await browser.saveFullPageScreen({ ... })
console.log(saveResults)
/**
 * {
 *   // 실행된 인스턴스의 장치 픽셀 비율
 *   devicePixelRatio: 1,
 *   // 형식이 지정된 파일 이름, 이는 `formatImageName` 옵션에 따라 달라집니다
 *   fileName: "examplePage-chrome-latest-1366x768.png",
 *   // 실제 스크린샷 파일을 찾을 수 있는 경로
 *   path: "/path/to/project/.tmp/actual/desktop_chrome",
 * };
 */

이미지 출력​

await browser.saveElement(".hero__title-logo", "example-element-tag")

saveElement Desktop

check(Screen/Element/FullPageScreen)​

콘솔 출력​

기본적으로 check(Screen/Element/FullPageScreen) 메소드는 1.23과 같은 불일치 백분율만 제공하지만, 플러그인에 returnAllCompareData: true 옵션이 설정되어 있으면 메소드 실행 후 다음 정보가 제공됩니다:

const checkResult = await browser.checkFullPageScreen({ ... })
console.log(checkResult)
/**
 * {
 *     // 형식이 지정된 파일 이름, 이는 `formatImageName` 옵션에 따라 달라집니다
 *     fileName: "examplePage-chrome-headless-latest-1366x768.png",
 *     folders: {
 *         // 실제 폴더와 파일 이름
 *         actual: "/path/to/project/.tmp/actual/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
 *         // 기준 폴더와 파일 이름
 *         baseline:
 *             "/path/to/project/localBaseline/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
 *         // 다음 폴더는 선택 사항이며 불일치가 있는 경우에만 표시됩니다
 *         // 차이를 저장하는 폴더와 파일 이름
 *         diff: "/path/to/project/.tmp/diff/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
 *     },
 *     // 불일치 백분율
 *     misMatchPercentage: 2.34,
 * };
 */

이미지 출력​

정보

아래 이미지는 체크 명령을 실행한 결과로 발생한 차이만 보여줍니다. 브라우저에서의 차이만 표시되지만, Android와 iOS의 출력도 동일합니다.

await browser.checkElement("#__docusaurus_skipToContent_fallback > header > div > div.buttons_pzbO > a:nth-child(1)", "example-element-tag")
정보

버튼 텍스트가 Get Started에서 Getting Started!로 변경되어 변화로 감지되었습니다.

Button Check Result

블록 아웃​

여기서는 상태+주소와 툴바가 차단된 Android NativeWebScreenshot 및 iOS의 블록 아웃에 대한 예제 출력을 확인할 수 있습니다.

Blockouts Android

Welcome! How can I help?

WebdriverIO AI Copilot