다중 창 테스트 소개(베타)

최신 웹 앱은 종종 새 브라우저 창을 시작하여 타사 웹 사이트를 통해 사용자를 인증하거나 추가 대화형 콘텐츠를 표시합니다.

TestCafe v1.9.0에서는 다중 창 테스트를 부분적으로 지원합니다. 이제 클라이언트 측 호출을 사용하여 브라우저 창을 열고 닫을 수 있습니다. 업데이트된 API에는 추가 창 관리 방법이 포함되어 있습니다. '베타' 단계 동안 이 기능은 Chrome 및 Firefox의 로컬 인스턴스에서만 활성화됩니다. 이 기능은 프로덕션 환경에서 사용할 준비가 되지 않았습니다. 구문과 기능은 모두 변경될 수 있습니다.

클라이언트 측 창 이벤트

TestCafe 브라우저 자동화 드라이버는 새로 시작된 창을 감지하고 자동으로 활성화합니다. 콘텐츠가 로드되고 모든 비동기 요청이 해결된 후 새 창에서 테스트가 계속됩니다. 해당 창이 닫히면 TestCafe는 상위 창으로 다시 전환하고 테스트를 다시 시작합니다.

아래 샘플 코드는 OAuth 로그인 시나리오를 보여줍니다. 라인8 ~ 10은 외부 OAuth 창에서 실행됩니다.

fixture('Login via <Service Name>')
    .page('https://my-page');
test('Should log in via <Service Name>', async t => {
    await t
        .click('#login-popup')
        .typeText('#username', 'username')
        .typeText('#pass', 'mySecret')
        .click('#submit')
        .expect(Selector('#user').textContent).eql('Hello %Username%!'); //Make sure we are logged in
});

기본 다중 창 테스트를 만들기 위해 추가 코드를 작성할 필요가 없습니다. 창을 임의로 열고 닫고 전환해야 하는 경우 TestCafe API을 사용하십시오.

창 간 전환

t.switchToPreviousWindow 메서드는 마지막 활성 창을 활성화합니다. 두 개의 창만 열려 있는 경우 이 메서드는 두 창 사이를 순환합니다. 이는 다양한 시나리오에서 유용합니다.

예를 들어 부동산 목록 웹사이트를 테스트하고 있다고 가정해 보겠습니다. 새 속성이 추가되면 사용 가능한 모든 목록과 함께 창에 표시되는지 확인하려고 합니다. 다음 테스트는 이 시나리오를 구현합니다.

fixture('Property List')
    .page('https://url.com/properties'); // Open the listings page
test('Check the property list', async t => {
    await t
        .openWindow('https://url.com/addnewproperty') // Open the 'add new property' page in a new window
        .click('#make-public') // Publish the listing
        .switchToPreviousWindow() // Go back to the listings page
        .expect(Selector('.property-list li').textContent).eql('New '); // Check if the new listing is displayed
});  

여러 창 관리

2개 이상의 열린 창이 있는 테스트 시나리오는 더 정밀해야 합니다. t.switchToWindow 메서드는 창 설명과 함께 창 설명자 객체 또는 조건자 함수를 전달하는 경우 열려 있는 모든 브라우저 창을 활성화할 수 있습니다.

창 설명자를 얻으려면 t.getCurrentWindow 메서드를 호출하거나 새 창을 열 때 반환 값을 저장하십시오.

const windowDesc = await t.openWindow('https://devexpress.github.io/testcafe/');
await t.switchToWindow(windowDesc);

조건자 함수는 창의 URL 또는 제목에 대한 설명을 포함해야 합니다. URL 객체는 Node.JS counterpart 과 동일한 구조를 가집니다.

await t
    .openWindow('https://devexpress.github.io/testcafe/')
    .switchToWindow(({url}) => url.pathname === '/testcafe');

작업 관리자 앱을 디버깅한다고 상상해 보십시오. 작업 목록과 알림 피드가 모두 실시간으로 업데이트되도록 하려면 t.switchToWindow 메서드를 사용하십시오.

fixture('Tasks View')
    .page('https://url.com/add-task');  

test('Add a new task', async t => {  
    await t
        .openWindow('https://url.com/tasks') // Open a new window with the task list
        .openWindow('https://url.com/feed') // Open the notification feed
        .switchToWindow(({url}) => url.pathname === '/add-task') // Go back to the new task form
        .typeText('#task-description', 'Redesign the landing page by 1 Feb') // Fill in the new task form
        .click('#submit-task') // Submit the task
        .switchToWindow(({url}) => url.pathname === '/tasks') // Switch back to the task list
        .expect(Selector('.task-item').count).eql(1) // Check if the new task is displayed
        .switchToWindow(({url}) => url.pathname === 'feed') // Switch to the notification feed
        .expect(Selector('.message').textContent).eql('Redesign the landing page by 1 Feb'); // Check for the corresponding notification
});  

API 개요

업데이트된 API에는 여러 가지 유용한 창 관리 방법이 포함되어 있습니다.

t.openWindow(url) 새 창이 열리고 지정된 URL을 가리킵니다.

t.getCurrentWindow() 활성 창에 해당하는 창 설명자를 가져옵니다.

t.switchToWindow(windowDescriptor)은 창 설명자에 해당하는 창을 활성화합니다.

t.switchToWindow(predicate) 조건자 함수를 사용하여 일치하는 창을 찾고 활성화합니다. 술어에는 창의 제목과 URL이 포함될 수 있습니다.

t.switchToParentWindow() 활성 창의 부모를 활성화합니다.

t.switchToPreviousWindow() 마지막 활성 창을 활성화합니다.

t.closeWindow() 활성 창을 닫습니다.

t.closeWindow(windowDescriptor) 창 설명자에 해당하는 창을 닫습니다.

새 API를 사용해 보고 의견을 알려주세요.

이 문서에 설명된 기능을 사용해 보려면 다음을 수행하십시오.

TestCafe 버전 1.9.0 이상을 설치하십시오.

둘 이상의 브라우저 창을 통합하는 테스트 시나리오를 만듭니다.

이 문서의 창 관리 방법을 테스트에 포함합니다.

TestCafe 팀은 사용자 행동을 사실적으로 모델링하는 API를 만들게 된 것을 자랑스럽게 생각합니다. 새 창 관리 기능을 수정하여 요구 사항을 더 잘 충족할 수 있는 경우 알려주십시오. our GitHub repository에 피드백 및 버그 보고서를 제출하십시오.

이러한 방법에 대한 추가 정보는 TestCafe 도움말 항목을 참조하십시오.