（テスト毎にログイン処理を書くのは面倒くさい！！！ログイン処理をまとめるようにします）

下記の記事を参考に、Role機能を使ってログイン処理を一箇所にまとめる処理をする

Power of User Roles In TestCafe

1. roles.js：ログインするユーザRole・ログイン処理の記述

2. test_roles.js：ログイン、ログイン後のメッセージの確認

3. ディレクトリ構造、ファイル配置

   % tree           
   .
   ├── roles.js
   └── test_roles.js
   

テスト実行結果

% **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

Thank you, satoko!
 ✓ Login test: userRole

 2 passed (3s)

roles.js

import { Selector, t, Role } from 'testcafe'
const loginURL = '<https://devexpress.github.io/testcafe/example/>'

export const adminRole = Role(loginURL, async t => {
        await login('John Smith')
}, {
        preserveUrl: true
});

export const userRole = Role(loginURL, async t => {
        await login('satoko')
}, {
        preserveUrl: true
});

async function login(userName) {
        await t
                .typeText('#developer-name', userName)
                .click(`#submit-button`)
};

test_roles.js

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') 

        console.log(await articleHeader.innerText);
});

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

        console.log(await articleHeader.innerText);
});