テスト中にスクリーンショットを残す方法

Screenshots and Videos | Advanced Guides | Guides | Docs

Take Screenshots at Arbitrary Moments During Test Run

テスト実行結果

shellでの実行結果と実際に撮ってくれたスクリーンショットを添付

（スクリーンショットの保存先も自動的に出力される。ただし、階層がめちゃ深くなるのが玉にキズ 🤔 ）

% **testcafe chrome test_roles.js**
 Running tests in:
 - Chrome 100.0.4896.60 / macOS 10.15.7

 fixture: login test

Thank you, John Smith!
 ✓ Login test: adminRole (screenshots:
 /Users/xxxxx/dev/testcafe/screenshots/2022-04-03_13-15-39/test-1/Chrome_100.0.4896.60_macOS_10.15.7/1.png)

Thank you, satoko!
 ✓ Login test: userRole (screenshots:
 /Users/xxxxx/dev/testcafe/screenshots/2022-04-03_13-15-39/test-2/Chrome_100.0.4896.60_macOS_10.15.7/1.png)

 2 passed (7s)

adminRoleのテスト実行結果

userRoleのテスト実行結果

（t.takeScreenshot()を入れるだけ！簡単 🤗 🤗 🤗  ）

import { adminRole, userRole } from './roles.js'
import { Selector } from 'testcafe';

fixture `fixture: login test`

const articleHeader = Selector('#article-header')

test('Login test: adminRole', async t => {
        await t 
                .useRole(adminRole)
                .expect(articleHeader.innerText).contains('Thank you') 
                **.takeScreenshot();**

        console.log('\\n');
        console.log(await articleHeader.innerText);
});

test('Login test: userRole', async t => {
        await t 
                .useRole(userRole)
                .expect(articleHeader.innerText).contains('Thank you') 
                **.takeScreenshot();**

        console.log('\\n');
        console.log(await articleHeader.innerText);
});

.takeScreenshot()コマンドでは、スクリーンショットだけでなくthumnailも撮ってくれる

（ちょっと余計。この辺はconfigurationファイルで調整できるといいなと想像 🤔）

% tree
.
├── roles.js
├── screenshots
│   └── 2022-04-03_13-15-39
│       ├── test-1
│       │   └── Chrome_100.0.4896.60_macOS_10.15.7
│       │       ├── 1.png
│       │       └── thumbnails
│       │           └── 1.png
│       └── test-2
│           └── Chrome_100.0.4896.60_macOS_10.15.7
│               ├── 1.png
│               └── thumbnails
│                   └── 1.png
├── test.js
└── test_roles.js