From f68ae4a2e093b92782bd2f0b75b7abfffb3b0263 Mon Sep 17 00:00:00 2001 From: Max Schmitt Date: Wed, 15 Sep 2021 22:07:50 +0200 Subject: [PATCH] chore(create-playwright): enhance UX follow-ups and add more verbose Playwright Test config (#8942) --- .eslintignore | 1 - packages/create-playwright/.npmignore | 1 + .../create-playwright/assets/.eslintrc.js | 6 +++ .../assets/github-actions.yml | 7 ++- .../assets/playwright.config.js | 43 +++++++++++++------ .../assets/playwright.config.ts | 40 ++++++++++++----- packages/create-playwright/src/index.ts | 23 ++++++---- 7 files changed, 86 insertions(+), 35 deletions(-) create mode 100644 packages/create-playwright/assets/.eslintrc.js diff --git a/.eslintignore b/.eslintignore index a4759232ec..d1b58632bf 100644 --- a/.eslintignore +++ b/.eslintignore @@ -13,4 +13,3 @@ browser_patches/chromium/output/ **/*.d.ts output/ /test-results/ -packages/create-playwright/assets/** diff --git a/packages/create-playwright/.npmignore b/packages/create-playwright/.npmignore index 877a72dc92..582525f08c 100644 --- a/packages/create-playwright/.npmignore +++ b/packages/create-playwright/.npmignore @@ -5,3 +5,4 @@ /tests/**/* /playwright.config.ts /tsconfig.json +/assets/.eslintrc.js diff --git a/packages/create-playwright/assets/.eslintrc.js b/packages/create-playwright/assets/.eslintrc.js new file mode 100644 index 0000000000..ee85124e0c --- /dev/null +++ b/packages/create-playwright/assets/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + "extends": "../../../.eslintrc.js", + "rules": { + "notice/notice": 0 + } +}; diff --git a/packages/create-playwright/assets/github-actions.yml b/packages/create-playwright/assets/github-actions.yml index e4583420bc..95e3926c3d 100644 --- a/packages/create-playwright/assets/github-actions.yml +++ b/packages/create-playwright/assets/github-actions.yml @@ -5,7 +5,7 @@ on: pull_request: branches: [ main, master ] jobs: - build: + test: timeout-minutes: 60 runs-on: ubuntu-latest steps: @@ -19,3 +19,8 @@ jobs: run: npx playwright install --with-deps - name: Run Playwright tests run: {{runTestsCommand}} + - uses: actions/upload-artifact@v2 + if: failure() + with: + name: playwright-test-results + path: test-results/ diff --git a/packages/create-playwright/assets/playwright.config.js b/packages/create-playwright/assets/playwright.config.js index 670ea8d943..6fb2629c37 100644 --- a/packages/create-playwright/assets/playwright.config.js +++ b/packages/create-playwright/assets/playwright.config.js @@ -5,10 +5,16 @@ const path = require('path') /** * @see https://playwright.dev/docs/test-configuration * @type{import('@playwright/test').PlaywrightTestConfig} - * */ + */ const config = { + // Timeout per test timeout: 30 * 1000, + // Test directory testDir: path.join(__dirname, '{{testDir}}'), + // If a test fails, retry it additional 2 times + retries: 2, + // Artifacts folder where screenshots, videos, and traces are stored. + outputDir: 'test-results/', // Run your local dev server before starting the tests: // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests @@ -17,37 +23,48 @@ const config = { // port: 3000, // }, + use: { + // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc. + // More information: https://playwright.dev/docs/trace-viewer + trace: 'retry-with-trace', + + // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context + contextOptions: { + ignoreHTTPSErrors: true, + }, + }, + projects: [ { name: 'Desktop Chrome', use: { ...devices['Desktop Chrome'], + + }, + }, + { + name: 'Desktop Firefox', + use: { + ...devices['Desktop Firefox'], }, }, { name: 'Desktop Safari', use: { - browserName: 'webkit', - viewport: { width: 1200, height: 750 }, - } + ...devices['Desktop Safari'], + }, }, // Test against mobile viewports. { name: 'Mobile Chrome', - use: devices['Pixel 5'], + use: { + ...devices['Pixel 5'], + }, }, { name: 'Mobile Safari', use: devices['iPhone 12'], }, - { - name: 'Desktop Firefox', - use: { - browserName: 'firefox', - viewport: { width: 800, height: 600 }, - } - }, ], }; - module.exports = config; diff --git a/packages/create-playwright/assets/playwright.config.ts b/packages/create-playwright/assets/playwright.config.ts index d6c4004694..7fbddeec85 100644 --- a/packages/create-playwright/assets/playwright.config.ts +++ b/packages/create-playwright/assets/playwright.config.ts @@ -3,8 +3,14 @@ import path from 'path'; // Reference: https://playwright.dev/docs/test-configuration const config: PlaywrightTestConfig = { + // Timeout per test timeout: 30 * 1000, + // Test directory testDir: path.join(__dirname, '{{testDir}}'), + // If a test fails, retry it additional 2 times + retries: 2, + // Artifacts folder where screenshots, videos, and traces are stored. + outputDir: 'test-results/', // Run your local dev server before starting the tests: // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests @@ -13,36 +19,48 @@ const config: PlaywrightTestConfig = { // port: 3000, // }, + use: { + // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc. + // More information: https://playwright.dev/docs/trace-viewer + trace: 'retry-with-trace', + + // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context + contextOptions: { + ignoreHTTPSErrors: true, + }, + }, + projects: [ { name: 'Desktop Chrome', use: { ...devices['Desktop Chrome'], + + }, + }, + { + name: 'Desktop Firefox', + use: { + ...devices['Desktop Firefox'], }, }, { name: 'Desktop Safari', use: { - browserName: 'webkit', - viewport: { width: 1200, height: 750 }, - } + ...devices['Desktop Safari'], + }, }, // Test against mobile viewports. { name: 'Mobile Chrome', - use: devices['Pixel 5'], + use: { + ...devices['Pixel 5'], + }, }, { name: 'Mobile Safari', use: devices['iPhone 12'], }, - { - name: 'Desktop Firefox', - use: { - browserName: 'firefox', - viewport: { width: 800, height: 600 }, - } - }, ], }; export default config; diff --git a/packages/create-playwright/src/index.ts b/packages/create-playwright/src/index.ts index 0c9f13e8c7..f7806ab8e2 100755 --- a/packages/create-playwright/src/index.ts +++ b/packages/create-playwright/src/index.ts @@ -43,6 +43,7 @@ class Generator { const { files, commands } = await this._identifyChanges(answers); executeCommands(this.rootDir, commands); await createFiles(this.rootDir, files); + this._patchGitIgnore(); await this._patchPackageJSON(); this._printOutro(answers); } @@ -116,19 +117,18 @@ class Generator { command: 'npx playwright install --with-deps', }); - files.set('.gitignore', this._buildGitIgnore()); - return { files, commands }; } - private _buildGitIgnore(): string { + private _patchGitIgnore() { + const gitIgnorePath = path.join(this.rootDir, '.gitignore'); let gitIgnore = ''; - if (fs.existsSync(path.join(this.rootDir, '.gitignore'))) - gitIgnore = fs.readFileSync(path.join(this.rootDir, '.gitignore'), 'utf-8').trimEnd() + '\n'; + if (fs.existsSync(gitIgnorePath)) + gitIgnore = fs.readFileSync(gitIgnorePath, 'utf-8').trimEnd() + '\n'; if (!gitIgnore.includes('node_modules')) gitIgnore += 'node_modules/\n'; gitIgnore += 'test-results/\n'; - return gitIgnore; + fs.writeFileSync(gitIgnorePath, gitIgnore); } private _readAsset(asset: string): string { @@ -153,24 +153,29 @@ class Generator { console.log(colors.green('✔ Success!') + ' ' + colors.bold(`Created a Playwright Test project at ${this.rootDir}`)); const pathToNavigate = path.relative(process.cwd(), this.rootDir); const prefix = pathToNavigate !== '' ? ` cd ${pathToNavigate}\n` : ''; + const exampleSpecPath = `${answers.testDir}${path.sep}example.spec.${languagetoFileExtension(answers.language)}`; console.log(`Inside that directory, you can run several commands: ${colors.cyan(commandToRunTests(this.packageManager))} Runs the end-to-end tests. - ${colors.cyan(commandToRunTests(this.packageManager) + ' -- --project=Desktop Chrome')} + ${colors.cyan(commandToRunTests(this.packageManager) + ' -- --project="Desktop Chrome"')} Runs the tests only on Desktop Chrome. - ${colors.cyan(commandToRunTests(this.packageManager) + ` -- ${answers.testDir}${path.sep}example.spec.${languagetoFileExtension(answers.language)}`)} + ${colors.cyan(commandToRunTests(this.packageManager) + ` -- ${exampleSpecPath}`)} Runs the tests of a specific file. - ${colors.cyan((this.packageManager === 'npm' ? 'npx' : 'yarn') + ' playwright debug ' + commandToRunTests(this.packageManager))} + ${colors.cyan(`${commandToRunTests(this.packageManager)} --debug`)} Runs the tests in debug mode. We suggest that you begin by typing: ${colors.cyan(prefix + ' ' + commandToRunTests(this.packageManager))} +And check out the following files: + - ./${pathToNavigate ? pathToNavigate + '/' : ''}${exampleSpecPath} - Example end-to-end test + - ./${pathToNavigate ? pathToNavigate + '/' : ''}playwright.config.${languagetoFileExtension(answers.language)} - Playwright Test configuration + Visit https://playwright.dev/docs/intro for more information. ✨ Happy hacking! 🎭`);