From 3bb0b86c0f7cfe3390e31d967dfecc679c72893c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20S=C4=99dzik?= Date: Thu, 4 Jan 2024 14:36:15 +0100 Subject: [PATCH 1/3] feat: add `@preview` decorator --- README.md | 33 +++++++++++++++++++++++++++++++-- examples/playwright.config.ts | 6 +++++- lib/debug.decorator.ts | 2 +- lib/index.ts | 1 + lib/preview.decorator.ts | 33 +++++++++++++++++++++++++++++++++ 5 files changed, 71 insertions(+), 4 deletions(-) create mode 100644 lib/preview.decorator.ts diff --git a/README.md b/README.md index bde8319..4ba4420 100644 --- a/README.md +++ b/README.md @@ -337,7 +337,7 @@ class MyTestSuite { ### Run test(s) or suite(s) in debug mode: `@debug()` Runs a `@test`(s) or `@suite`(s) in debug mode. -`@test`(s) or `@suite`(s) lacking the `@debug` decorator will be excluded. +Tests or suites without the `@debug` decorator will not be excluded. Learn more about debug mode: https://playwright.dev/docs/debug ```ts @@ -361,7 +361,36 @@ class TestSuite { ``` Then run playwright tests as usual, i.e. `npx playwright test`. -> For debugging purposes, running tests only for one project/browser is recommended. +> For debugging purposes, running tests only on local machine for one project/browser is recommended. + + +### Run test(s) or suite(s) in preview mode: `@preview()` +Runs a `@test`(s) or `@suite`(s) in preview (headed browser) mode, simulating user interaction (slowing down each operation by 1000ms). +Tests or suites without the `@preview` decorator will not be excluded. + +```ts +import { suite, test, preview, TestArgs } from 'playwright-decorators'; + +// Preview selected test suite(s) +@preview() // <-- Decorate suite with @preview() +@suite() +class PreviewTestSuite { +} + +// Or preview selected test(s) +@suite() +class TestSuite { + @preview() // <-- Decorate test with @preview() + @test() + async test({ page }: TestArgs) { + // ... + } +} +``` + +Then run playwright tests as usual, i.e. `npx playwright test`. +> For preview purposes, running tests only for one project/browser is recommended. + ### Custom decorators Custom decorators can be created using `createTestDecorator` and `createSuiteDecorator` functions. diff --git a/examples/playwright.config.ts b/examples/playwright.config.ts index 38f082b..e5430ef 100644 --- a/examples/playwright.config.ts +++ b/examples/playwright.config.ts @@ -17,8 +17,12 @@ export default defineConfig({ projects: [ { name: 'chromium', - use: { ...devices['Desktop Chrome'] } + use: { ...devices['Desktop Chrome'] }, } + // { + // name: 'firefox', + // use: { ...devices['Desktop Firefox'] }, + // }, ], webServer: { command: 'npm run start', diff --git a/lib/debug.decorator.ts b/lib/debug.decorator.ts index c77a133..7276822 100644 --- a/lib/debug.decorator.ts +++ b/lib/debug.decorator.ts @@ -2,7 +2,7 @@ import { createSuiteAndTestDecorator } from './custom' /** * Runs a @test or @suite in debug mode. - * @test(s) or @suite(s) lacking the @debug decorator will be excluded. + * Tests or suites without the @debug decorator will not be excluded. * Learn more about debug mode: https://playwright.dev/docs/debug */ export const debug = () => diff --git a/lib/index.ts b/lib/index.ts index c32a124..b5b2da1 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -23,6 +23,7 @@ export { tag } from './tag.decorator' // helpers export { debug } from './debug.decorator' +export { preview } from './preview.decorator' // common export { type TestInfo, type TestArgs } from './common' diff --git a/lib/preview.decorator.ts b/lib/preview.decorator.ts new file mode 100644 index 0000000..43f51e0 --- /dev/null +++ b/lib/preview.decorator.ts @@ -0,0 +1,33 @@ +import { createSuiteAndTestDecorator } from './custom' +import playwright from '@playwright/test' + +const playwrightPreviewPreset = () => { + // disable timeout, as all operations are slowed down by 1000ms + playwright.describe.configure({ timeout: 0 }) + + playwright.use({ + // enable headed mode + headless: false, + launchOptions: { + // slow down every operation by 1000ms + slowMo: 1000 + } + }) +} + +/** + * Runs a @test(s) or @suite(s) in preview (headed browser) mode, simulating user interaction (slowing down each operation by 1000ms). + * Tests or suites without the @preview decorator will not be excluded. + */ +export const preview = () => + createSuiteAndTestDecorator( + 'preview', + ({ suite }) => { + playwrightPreviewPreset() + suite.only = true + }, + ({ test }) => { + playwrightPreviewPreset() + test.only = true + } + ) From f41c5c42625f3df610e1c80a690fd65042fbc8a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20S=C4=99dzik?= Date: Thu, 4 Jan 2024 14:37:45 +0100 Subject: [PATCH 2/3] chore: generate changeset --- .changeset/ninety-pants-speak.md | 2 +- .changeset/stale-avocados-mix.md | 28 ++++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 .changeset/stale-avocados-mix.md diff --git a/.changeset/ninety-pants-speak.md b/.changeset/ninety-pants-speak.md index 43b2257..d7b7ba0 100644 --- a/.changeset/ninety-pants-speak.md +++ b/.changeset/ninety-pants-speak.md @@ -5,7 +5,7 @@ Add `@debug` decorator Runs a `@test`(s) or `@suite`(s) in debug mode. -`@test`(s) or `@suite`(s) lacking the `@debug` decorator will be excluded. +Tests or suites without the `@debug` decorator will not be excluded. Learn more about debug mode: https://playwright.dev/docs/debug ```ts diff --git a/.changeset/stale-avocados-mix.md b/.changeset/stale-avocados-mix.md new file mode 100644 index 0000000..ac520f7 --- /dev/null +++ b/.changeset/stale-avocados-mix.md @@ -0,0 +1,28 @@ +--- +'playwright-decorators': minor +--- + +Add `@preview` decorator + +Runs a `@test`(s) or `@suite`(s) in preview (headed browser) mode, simulating user interaction (slowing down each operation by 1000ms). +Tests or suites without the `@preview` decorator will not be excluded. + +```ts +import { suite, test, preview, TestArgs } from 'playwright-decorators'; + +// Preview selected test suite(s) +@preview() // <-- Decorate suite with @preview() +@suite() +class PreviewTestSuite { +} + +// Or preview selected test(s) +@suite() +class TestSuite { + @preview() // <-- Decorate test with @preview() + @test() + async test({ page }: TestArgs) { + // ... + } +} +``` From 58c291197d4a55cff21f3f010721e29e40d7c5de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20S=C4=99dzik?= Date: Thu, 4 Jan 2024 14:39:59 +0100 Subject: [PATCH 3/3] chore: revert changes in examples configuration --- examples/playwright.config.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/examples/playwright.config.ts b/examples/playwright.config.ts index e5430ef..38f082b 100644 --- a/examples/playwright.config.ts +++ b/examples/playwright.config.ts @@ -17,12 +17,8 @@ export default defineConfig({ projects: [ { name: 'chromium', - use: { ...devices['Desktop Chrome'] }, + use: { ...devices['Desktop Chrome'] } } - // { - // name: 'firefox', - // use: { ...devices['Desktop Firefox'] }, - // }, ], webServer: { command: 'npm run start',