Nighthwatch VRT 시각 회귀 테스트

우선, 시각 회귀 테스트(VRT)가 무엇인지 모르면 이전 블로그를 읽어보라고 제안합니다.만약 당신이 이미 이 글을 읽었거나, 혹은 "VRT가 무엇입니까?"에 대해 알고 있다면,그럼 너는 이제 이 블로그를 읽을 준비가 다 됐어.다음 그림(ByGalaxy Weblinks에서는 VRT와 자동 VRT에 사용할 수 있는 다양한 도구에 대한 기본 개념도 보여 줍니다.
nightwatch-vrt의 정의는 그것의 이름부터 매우 명확하다.VRT 툴로서 nightwatch.js 확장이 가능합니다.사용nightwatch-vrt은 매우 간단합니다.screenshotIdenticalToBaseline 함수만 호출하면 현재 화면 캡처와 해당하는 기본 이미지를 비교할 수 있습니다.이 함수의 내부 logic 를 보면, 원소가 나타나기를 기다린 다음, 원소의 화면 캡처를 포착하여 기선과 비교하고, 마지막으로 비교 결과를 되돌려줍니다.이미지 비교 논리를 더 연구하면 nightwatch-vrt 실제적으로 JIMP (자바스크립트 이미지 처리 프로그램) 을 사용하고 자바스크립트로 구축된 것으로 로컬 의존 관계가 없다는 것을 알 수 있습니다.

프로비저닝

내가 이미 말한 바와 같이 nightwatch-vrt는 nightwatch.js의 확장입니다. 우선nightwatch를 설정해야 합니다.js.만약 당신이 어떻게 설정하는지 모른다면, 당신은 나의 이전 블로그를 참고할 수 있습니다.다음에 프로젝트의 devDependencies에 nightwatch vrt를 추가합니다.당신은 아래의 명령을 사용하여 실을 사용할 수 있습니다.

yarn add --dev nightwatch-vrt

현재, nightwatch 프로필에 nightwatch.js 과 custom_commands_path 를 추가하거나 편집해야 합니다. 아래와 같습니다.

custom_commands_path: [
        'node_modules/nightwatch-vrt/commands'
    ],
    custom_assertions_path: [
        'node_modules/nightwatch-vrt/assertions'
    ]

위에서 언급한 설정을 제외하고는 custom_assertions_path nightwatch 프로필의 visual_regression_settings 부분에 globals 를 추가해야 합니다. 아래와 같습니다.

globals: {
                visual_regression_settings: {
                    generate_screenshot_path: generateScreenshotFilePath,
                    latest_screenshots_path: 'tests/vrt/latest',
                    baseline_screenshots_path: 'tests/vrt/baseline',
                    diff_screenshots_path: 'tests/vrt/diff',
                    threshold: 0.02,
                    prompt: false,
                    always_save_diff_screenshot: false
                }
            },

generate_screenshot_path에 지정된 함수를 정의해야 합니다.예를 들어 위의 설정에서 나는 내가 정의한 다음과 같은 함수를 사용했다generateScreenshotFilePath.

function generateScreenshotFilePath(nightwatchClient, basePath, imagePath) {
    return path.join(process.cwd(), basePath, imagePath)
}

VRT 화면 캡처 경로 생성기 옵션이 함수를 받아들이기 때문에, 이 함수는 테스트 속성에 따라 전체 경로를 포함하는 문자열을 되돌려줍니다.모든 테스트가 같은 화면 캡처를 사용하는 것은 아니기 때문에 경로 생성기 함수를 대체하는 상수 문자열을 제공할 수 없습니다.
따라서 이러한 구성은 베이스라인 이미지, 최신 이미지 및 차이 이미지를 각각 하위 폴더generate_screenshot_path, tests/vrt/baseline 및 tests/vrt/latest에 저장합니다.만약 우리가 기본 이미지, 차이 이미지, 최신 이미지에 공통 경로를 제공한다면, 이미지를 구분하기 위해 접미사 같은 선택할 수 있는 설정을 제공해야 한다.이러한 옵션 구성에는 tests/vrt/diff, baseline_suffix 및 diff_suffix가 포함됩니다.latest_suffix의 threshold 옵션은 이미지 비교의 민감도를 지정합니다.다른 모든 옵션의 의미를 이해하려면 nightwatch-vrt github repository의 자술 파일을 보십시오

작성 테스트

여느 때와 마찬가지로 우리는 먼저 특징 파일을 만들어서 작성 테스트를 시작하고 시각 검사는 절차 정의에서 완성할 수 있다.프레젠테이션에서, 나는react의 간단한 대기 프로그램 this project 을 인용했다.
이 응용 프로그램의 테스트 장면 중 하나는 다음과 같습니다.

Scenario: toDo task add test
    Given the user has opened the home page
    When the user adds a new task "New Task"
    Then the task "New Task" should appear in the toDo list
    And the toDo form should match the default baseline

여기서 단계visual_regression_settings는 시각 회귀 테스트를 수행할 것이기 때문에 시범 부분에서 저는 완성할 것입니다.나는 단지 이 한 걸음만 주목할 것이다.
이 단계의 구현은 다음과 같습니다.

const { Then } = require('cucumber');
const { client } = require('nightwatch-api');

const toDoFormSelector = "#to-do-form"

const assertScreenShot = async function(imgName) {
    await client.waitForElementVisible(toDoFormSelector)
    await client.assert.screenshotIdenticalToBaseline(
        toDoFormSelector,
        imgName,
        `Matched the ${imgName} of toDo page`
    )
}

Then(/^the toDo form should match the default baseline$/, function () {
    return assertScreenShot("todo-form")
});

And the toDo form should match the default baseline 함수는 assertScreenShot 라이브러리에 정의된 명령screenshotIdenticalToBaseline()을 사용합니다.nightwatch-vrt 첫 번째 매개변수만 필요한 경우 최대 4개의 매개변수를 사용할 수 있습니다.

첫 번째는 문자열로 시각 테스트를 해야 하는 요소의 선택기입니다.

두 번째 문자열도 기선, 차이 또는 최신 이미지 이름에 사용되는 이미지 이름입니다.기본 이름은 첫 번째 매개 변수로 제공된 선택기의 이름입니다.

세 번째는nightwatch VrtOptions 설정으로nightwatch 프로필의 기본값과screenshotIdenticalToBaseline를 덮어씁니다.

네 번째 매개 변수는 테스트가 성공적으로 끝난 후 컨트롤러에 표시되는 문자열입니다.

VRT를 처음 실행할 때는 베이스라인 이미지가 존재하지 않으므로 생성됩니다.테스트에서 적당한 이름을 가진 기선 이미지를 찾으면 요소의 화면 캡처와 기선의 상응하는 이미지를 비교합니다.따라서 첫 번째 실행 테스트를 실행하면 두 번, 한 번 베이스라인 이미지를 만들고, 다른 한 번 현재 상태와 베이스라인을 비교합니다.다음에 테스트를 실행할 때, 베이스라인이 한 번만 만들어지기 때문에, 이것은 한 번만 실행될 것입니다.그러나 UI에 일부 변경 사항이 있고 테스트에 실패한 경우 베이스라인 이미지도 변경해야 합니다.
기본 이미지를 업데이트하는 방법은 주로 두 가지가 있다.가장 간단한 방법은nightwatch 프로필visual_regression_settings 부분에서 프로필always_save_diff_screenshot:을 true로 설정하는 것이다.실패한 모든 화면 캡처를 즉시 업데이트합니다.화면 캡처만 업데이트하면 기본 화면 캡처를 삭제한 다음 테스트를 다시 실행하면 업데이트된 화면 캡처를 가져와 새 기본 캡처로 저장합니다.

테스트 실행

VRT를 실행하려면 특별한 명령이 필요하지 않습니다.일반적인 야간 감시 테스트를 수행하는 것처럼 이 기능 파일을 포함하는 장면을 실행할 수 있습니다. 단지 그것뿐입니다.만약 당신이 야간 시야를 설정하고 테스트를 실행하는 데 도움을 필요로 한다면, 당신은 나의 것을 읽을 수 있습니다.