Playwright導入(Next.js, TypeScript)

yarn add -D @playwright/test
// or
npm i -D @playwright/test

# install supported browsers
npx playwright install

import { PlaywrightTestConfig, devices } from '@playwright/test'

const config: PlaywrightTestConfig = {
    testMatch: '/e2e/**/*.spec.ts',
    use: {
        baseURL: process.env.BASE_URL || 'http://localhost:3000',
        headless: true,
        ignoreHTTPSErrors: true,
        actionTimeout: 10_000
    },
    projects: [
        {
            name: 'chromium',
            use: {...devices['Desktop Chrome']},
        },
        {
            name: 'iphone12',
            use: {...devices["iPhone 12"]}
        }
    ]
}
export default config;

npx playwright test

npx playwright test --debug

import { FullConfig } from '@playwright/test';
import dotenv from 'dotenv'
import path from 'path'

dotenv.config({ path: path.resolve(process.cwd(), '.env.local') })

async function globalSetup(config: FullConfig) {
    console.log('begin global setup!')
    //   Globalな設定があれば設定する
    console.log('end global setup!')
}

export default globalSetup;

const config: PlaywrightTestConfig = {
    globalSetup: require.resolve('./e2e/global-setup.ts'),
    // 中略
}
export default config;

await page.fill("#username_or_email", process.env.LOGIN_ID);
await page.fill("#password", process.env.LOGIN_PASS );