Playwright Cheatsheet for Javascript & Typescript

npm i -D @playwright/test
npx playwright install
npm i -D typescript # with TS

touch tests/example.spec.js # with JS
touch tests/example.spec.ts # with TS

import {test, expect} from '@playwright/test';

test('has brand in <title>', async ({ page }) => {
  await page.goto('https://www.browsercat.com/');
  await expect(page).toHaveTitle(/BrowserCat/);
});

npx playwright codegen

npx playwright test

npx playwright test --ui

npx playwright show-report

// playwright.config.ts
export type TestOptions = {
  cat: string;
};

export default defineConfig<TestOptions>({
  projects: [{
    name: 'cartoons',
    use: {cat: 'Garfield'},
  }, {
    name: 'sitcoms',
    use: {cat: 'Smelly Cat'},
  }]
});

// extended-test.ts
import {test} from '@playwright/test';
import type {TestOptions} from 'playwright.config.ts';

export default test.extend<TestOptions>({
  cat: ['Hello Kitty', {option: true}],
});

// profiles.spec.ts
import test from './extended-test.ts';

test('test', async ({page, cat}) => {
  await expect(page).toHaveTitle(cat);
});

touch playwright.config.ts

import {defineConfig} from '@playwright/test';

export default defineConfig({
  testMatch: 'tests/**/*.spec.{ts,tsx}',
});

export default defineConfig({
  build: {
    external: ['**/*bundle.js'],
  },
});

export default defineConfig({
  quiet: !!process.env.CI,
});

export default defineConfig({
  outputDir: './.test/results',
});

export default defineConfig({
  preserveOutput: 'always',
});

export default defineConfig({
  preserveOutput: 'never',
});

export default defineConfig({
  preserveOutput: 'failures-only',
});

export default defineConfig({
  snapshotPathTemplate: './.test/snapshots/{projectName}/{testFilePath}/{arg}{ext}',
});

export default defineConfig({
  retries: 3, // default 0
});

export default defineConfig({
  repeatEach: 3, // default 1
});

export default defineConfig({
  timeout: 1000 * 30,
});

export default defineConfig({
  globalTimeout: 1000 * 60 * 60,
});

export default defineConfig({
  forbidOnly: !!process.env.CI,
});

export default defineConfig({
  maxFailures: 10, // default 0
});

export default defineConfig({
  expect: {timeout: 1000 * 10}, // default 5s
});

export default defineConfig({
  toHaveScreenshot: {
    threshold: 0.1, // default 0.2
    maxDiffPixelRatio: 0.1, // default 0
  },
});

export default defineConfig({
  toMatchSnapshot: {
    threshold: 0.1, // default 0.2
    maxDiffPixelRatio: 0.1, // default 0
  },
});

export default defineConfig({
  ignoreSnapshots: !process.env.CI,
});

export default defineConfig({
  updateSnapshots: 'missing', // or 'all' or 'none'
});

test.describe.configure({
  mode: 'parallel', // or 'serial'
  retries: 3,
  timeout: 1000 * 60,
});

test('test', async () => {});

test.describe('group', async () => {
  test.describe.configure({
    mode: 'parallel', // or 'serial'
    retries: 3,
    timeout: 1000 * 60,
  });
  
  test('test', async () => {});
});

export default defineConfig({
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: true,
  },
  use: {
    baseURL: 'http://localhost:3000',
  },
});

export default defineConfig({
  webServer: [{
    command: 'npm run start:app',
    url: 'http://localhost:3000',
  }, {
    command: 'npm run start:api',
    url: 'http://localhost:3030',
  }],
});

export default defineConfig({
  use: {
    connectOptions: {
      wsEndpoint: 'wss://api.browsercat.com/connect',
      headers: {'Api-Key': '<YOUR_API_KEY>'},
      exposeNetwork: 'localhost, *.browsercat.com',
    },
  },
});

export default defineConfig({
  use: {
    testIdAttribute: 'data-bcat-id',
  },
});

export default defineConfig({
  use: {
    headless: false,
  },
});

export default defineConfig({
  use: {
    screenshot: 'on', // or 'only-on-failure' | 'off'
  },
});

export default defineConfig({
  use: {
    video: 'on', // or 'retain-on-failure' | 'on-first-retry' | 'off'
  },
});

export default defineConfig({
  use: {
    trace: 'on', // or 'retain-on-failure' | 'on-first-retry' | 'on-all-retries' | 'off'
  },
});

export default defineConfig({
  use: {
    acceptDownloads: false, // default: true
  },
});

export default defineConfig({
  use: {
    actionTimeout: 1000 * 3, // default: 0
  },
});

export default defineConfig({
  use: {
    navigationTimeout: 1000 * 3, // default: 0
  },
});

export default defineConfig({
  use: {
    javaScriptEnabled: false, // default: true
  },
});

export default defineConfig({
  use: {
    serviceWorkers: 'block', // default: 'allow'
  },
});

export default defineConfig({
  use: {
    permissions: ['geolocation', 'notifications'],
  },
});

export default defineConfig({
  use: {
    storageState: {
      cookies: [{
        name: 'name',
        value: 'value',
        domain: 'browsercat.com',
        // and other cookie properties...
      }],
    },
  },
});

export default defineConfig({
  use: {
    storageState: {
      origins: [{
        origin: 'browsercat.com',
        localStorage: [{
          name: 'name',
          value: 'value',
        }],
      }],
    },
  },
});

export default defineConfig({
  use: {
    storageState: 'path/to/storage.json',
  },
});

export default defineConfig({
  use: {
    // Allows tests to use relative URLs
    // e.g. `page.goto('/login');`
    baseURL: isDev ? 
      'https://localhost:8080' :
      'https://www.example.com',
  },
});

export default defineConfig({
  use: {
    httpCredentials: {
      username: 'user',
      password: 'pass',
    },
  },
});

export default defineConfig({
  use: {
    extraHTTPHeaders: {
      'X-My-Header': 'value',
    },
  },
});

export default defineConfig({
  use: {
    offline: true,
  },
});

export default defineConfig({
  use: {
    // Use when you encounter security issues
    // injecting custom scripts or styles
    bypassCSP: true,
  },
});

export default defineConfig({
  use: {
    ignoreHTTPSErrors: process.env.NODE_ENV === 'development',
  },
});

export default defineConfig({
  use: {
    proxy: {
      server: 'http://localhost:8080',
      username: 'user',
      password: 'pass',
      // bypass proxy for specific domain patterns
      bypass: 'browsercat.com, .example.com',
    },
  },
});

import {defineConfig, devices} from '@playwright/test';

export default defineConfig({
  projects: [{
    name: 'Desktop Chrome',
    use: {
      ...devices['Desktop Chrome'],
    },
  }, {
    name: 'Mobile Chrome',
    use: {
      ...devices['Mobile Chrome'],
    },
  }],
});

export default defineConfig({
  use: {
    browserName: 'firefox', // or 'webkit' | 'chromium'
  },
});

export default defineConfig({
  use: {
    channel: 'chrome', // or 'chrome-beta' | 'chrome-dev' | 'msedge' | 'msedge-beta' | 'msedge-dev'
  },
});

export default defineConfig({
  use: {
    colorScheme: 'dark', // or 'light' | 'no-preference'
  },
});

export default defineConfig({
  use: {
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
  },
});

export default defineConfig({
  use: {
    viewport: { width: 1920, height: 1080 },
  },
});

export default defineConfig({
  use: {
    launchOptions: {
      args: ['--no-sandbox'],
    },
  },
});

export default defineConfig({
  use: {
    contextOptions: {
      reducedMotion: 'reduce',
      strictSelectors: true,
    },
  },
});

import {defineConfig, devices} from '@playwright/test';

export default defineConfig({
  projects: [{
    name: 'iPhone Landscape',
    use: {
      ...devices['iPhone 14 Pro Max landscape'],
    },
  }, {
    name: 'Kindle Fire',
    use: {
      ...devices['Kindle Fire HDX'],
    },
  }],
});

export default defineConfig({
  use: {
    deviceScaleFactor: 2,
  },
});

export default defineConfig({
  use: {
    isMobile: true,
  },
});

export default defineConfig({
  use: {
    hasTouch: true,
  },
});

export default defineConfig({
  use: {
    locale: 'en-US',
  },
});

export default defineConfig({
  use: {
    timezoneId: 'America/New_York',
  },
});

export default defineConfig({
  use: {
    geolocation: {
      latitude: 40.730610, 
      longitude: -73.935242,
      accuracy: 11.08,
    },
  },
});

export default defineConfig({
  use: {offline: false},

  projects: [{
    name: 'Offline Support',
    testMatch: '**/offline/**/*.spec.ts',
    use: {offline: true},
  }]
});

test.use({offline: true});

test('test', async () => {});

test.describe('group', async () => {
  test.use({offline: true});
  
  test('test', async () => {});
});

import {test, expect} from '@playwright/test';

test('has brand in <title>', async ({ page }) => {
  await page.goto('https://www.browsercat.com/');
  await expect(page).toHaveTitle(/BrowserCat/);
});

test('with screenshot', async ({page}) => {
  await test.info().attach('screenshot', {
    contentType: 'image/png',
    body: await page.screenshot(),
  });
});

test.describe('group', async () => {
  test('test', async () => {});
});

test.describe('group', async () => {
  test.describe('subgroup', async () => {
    test('test', async () => {});
  });
});

test.describe(async () => {
  // will not be nested in reports
  test('test', async () => {});
});

test('long test', async () => {
  await step('step 1', async () => {});
  await step('step 2', async () => {});
  await step('step 3', async () => {});
});

test('long test', async () => {
  await step('step 1', async () => {
    await step('substep 1', async () => {});
    await step('substep 2', async () => {});
  });
});

test('long test', async () => {
  await step('step 1', async () => {
    throw new Error();
  }, {box: true});
});

async function login(user: string, pass: string) {
  return test.step('login', async ({page}) => {
    await page.fill('input[name="username"]', user);
    await page.fill('input[name="password"]', pass);
    await page.click('button[type="submit"]');
  });
}

test('login, then interact', async () => {
  await login('user', 'pass');
});

test.only('working on this', async () => {});

test.describe.only('working on this', async () => {});

test.only('working on this', async () => {});
test.describe.only('and this', async () => {});

test('but not this', async () => {});
test.describe('or this', async () => {});

test('slow test', async () => {
  test.slow();
});

test('slow on webkit', async ({browserName}) => {
  test.slow(browserName === 'webkit');
});

test.slow(({browserName}) => browserName === 'webkit');

test('fast sometimes', async () => {});

test.skip('skipped for now', async () => {});

test('skipped for now', async () => {
  test.skip();
});

test.describe.skip('skipped for now', async () => {});

test('skipped on webkit', async ({browserName}) => {
  test.skip(browserName === 'webkit', `Not supported.`);
});

test.skip(({browserName}) => browserName === 'webkit');

test('possibly skipped', async () => {});
test('possibly skipped', async () => {});

test.fixme('broken for now', async () => {});

test('broken for now', async () => {
  test.fixme();
});

test.describe.fixme('broken for now', async () => {});

test('broken on webkit', async ({browserName}) => {
  test.fixme(browserName === 'webkit', `Not supported.`);
});

test.fixme(({browserName}) => browserName === 'webkit');

test('works sometimes', async () => {});
test('works sometimes', async () => {});

test('always', async () => {
  test.fail();
});

test('broken on webkit', async ({browserName}) => {
  test.fail(browserName === 'webkit', `Not supported.`);
});

test.fail(({browserName}) => browserName === 'webkit');

test('works sometimes', async () => {});
test('works sometimes', async () => {});

test('test', {
  tags: ['@slow', '@feature-auth'],
}, async () => {});

test.describe('group', {
  tags: ['@feature-dashboard'],
}, async () => {
  test('test', async () => {});
});

npx playwright test --grep @feature-auth

npx playwright test --grep "@feature-.+"

npx playwright test --grep-invert @feature-auth

npx playwright test --grep-invert "@feature-.+"

test('test', {
  annotation: [{
    type: 'issue', 
    description: '@browsercat/cookbook/issues/1',
  }],
}, async () => {});

test.describe('group', {
  annotation: [{
    type: 'flaky', 
    description: 'Upstream browser vendor bug.',
  }],
}, async () => {
  test('test', async () => {});
});

// playwright.config.ts
export default defineConfig({
  globalSetup: 'tests/global-setup.ts',
});

// tests/global-setup.ts
import type {FullConfig} from '@playwright/test';

export default async function setup(cfg: FullConfig) {
  // runs once before all tests
}

// playwright.config.ts
export default defineConfig({
  globalTeardown: 'tests/global-teardown.ts',
});

// tests/global-teardown.ts
import type {FullConfig} from '@playwright/test';

export default async function teardown(cfg: FullConfig) {
  // runs once after all tests
}

// playwright.config.ts
export default defineConfig({
  projects: [{
    // runs before all projects that depend on 'setup'
    name: 'setup',
    testMatch: 'tests/setup.ts',
    teardown: 'teardown', // <-- project reference
  }, {
    name: 'tests',
    dependencies: ['setup'],
  }, {
    // runs after all projects that depend on 'setup'
    name: 'teardown',
    testMatch: 'tests/teardown.ts',
  }],
});

test.beforeAll(async () => {
  // runs once before all tests
});

test('test', async () => {});

test.afterAll(async () => {
  // runs once after all tests
});

test('test', async () => {});

test.beforeEach(async () => {
  // runs once before each test
});

test('test', async () => {});

test.afterEach(async () => {
  // runs once after each test
});

test('test', async () => {});

test.beforeAll('create mocks', async () => {});
test.beforeEach('generate values', async () => {});
test.afterEach('reset cache', async () => {});
test.afterAll('delete files', async () => {});

test.describe('group', async () => {
  test.beforeAll(async () => {
    // runs once before all tests in group
  });

  test('test', async () => {});
});

test.describe('group', async () => {
  test.afterAll(async () => {
    // runs once after all tests in group
  });

  test('test', async () => {});
});

test.describe('group', async () => {
  test.beforeEach(async () => {
    // runs once before each test in group
  });

  test('test', async () => {});
});

test.describe('group', async () => {
  test.afterEach(async () => {
    // runs once after each test in group
  });

  test('test', async () => {});
});

test.describe('group', async () => {
  test.beforeAll(async () => {});

  test.describe('subgroup', async () => {
    test.beforeEach(async () => {});

    test('test', async () => {});
  });
});

test('test', async ({page}) => {
  // `page` is exclusive to this test
  await page.goto('https://www.browsercat.com');
});

test('test', async ({context}) => {
  // `context` is exclusive to this test
  const page = await context.newPage();
});

test('test', async ({browser}) => {
  // `browser` is shared across worker thread
  const context = await browser.newContext();
});

test('test', async ({request}) => {
  // `request` is exclusive to this test
  await request.get('https://api.browsercat.com');
});

import {test as base} from '@playwright/test';
import {nanoid} from 'nanoid';

type TestFixtures = {
  nanoid: typeof nanoid;
  getUserId: () => `user_${string}`;
};

export const test = base.extend<TestFixtures>({
  nanoid: nanoid,
  getUserId: () => `user_${nanoid()}`;
});

import {test as base, type BrowserContext} from '@playwright/test';

type TestFixtures = {
  authContext: BrowserContext;
};

export const test = base.extend<TestFixtures>({
  authContext: async ({browser}, use) => {
    // setup before each test
    const authContext = await browser.newContext({
      storageState: 'auth.json',
    });

    // run test
    await use(authContext);
    
    // teardown after each test
    await authContext.close();
  },
});

export const test = base.extend({
  page: [async ({page}, use) => {
    page.addInitScript('tests/init.js');
    await use(page);
  }],
});

import {test, mergeTests} from '@playwright/test';

const test1 = test.extend({});
const test2 = test.extend({});

export const test = mergeTests(test1, test2);

export const test = base.extend({
  fixture: [async (ctx, use) => {
    await use(null);
  }, {auto: true}],
});

export const test = base.extend({
  fixture: [async (ctx, use) => {
    // fixture will not count toward test timeout
    await use(await slowRequest());
  }, {timeout: 1000 * 10}],
});

import {test as base, type BrowserContext} from '@playwright/test';

type WorkerFixtures = {
  authContext: BrowserContext;
};

export const test = base.extend<{}, WorkerFixtures>({
  authContext: [async ({browser}, use) => {
    // setup before all tests
    const authContext = await browser.newContext({
      storageState: 'auth.json',
    });

    // run all tests
    await use(authContext);
    
    // teardown after all tests
    await authContext.close();
  }, {scope: 'worker'}],
});

import {test as base, type Page} from '@playwright/test';

type TestFixtures = {
  perTest: Page;
};
type WorkerFixtures = {
  perWorker: Page;
};

export const test = base
  .extend<TestFixtures, WorkerFixtures>({
    perTest: [async ({context}, use) => {
      const ephemeralPage = await context.newPage();
      await use(ephemeralPage);
    }, {scope: 'test'}],

    perWorker: [async ({browser}, use) => {
      const context = await browser.newContext();
      const persistentPage = await context.newPage();
      await use(persistentPage);
    }, {scope: 'worker'}],
  });

type TestOptions = {
  domain: string;
};

export const test = base.extend<TestOptions>({
  domain: [
    'https://www.browsercat.com', 
    {scope: 'test', option: true},
  ],
});

type WorkerOptions = {
  siteUrl: string;
};

export const test = base.extend<{}, WorkerOptions>({
  siteUrl: [
    'https://www.browsercat.com', 
    {scope: 'worker', option: true},
  ],
});

type Options = {
  siteUrl: string;
};

export default defineConfig<Options>({
  projects: [{
    name: 'site-amazon',
    use: {
      siteUrl: 'https://www.amazon.com',
    },
  }, {
    name: 'site-producthunt',
    use: {
      siteUrl: 'https://www.etsy.com',
    },
  }],
});

expect(1).toBe(1);

expect(1).toBeTruthy();

expect(0).toBeFalsy();

expect('a').toBe(expect.any(String));

expect(1).toBe(expect.any(Number));

expect(true).toBe(expect.any(Boolean));

expect(() => {}).toBe(expect.any(Function));

expect(NaN).toBeNaN();

expect(null).toBeNull();

expect(undefined).toBeUndefined();

expect(1).toBeDefined();

expect(page).toBeInstanceOf(Page);

expect(1).toBeGreaterThan(0);

expect(1).toBeGreaterThanOrEqual(1);

expect(0).toBeLessThan(1);

expect(1).toBeLessThanOrEqual(1);

expect('hello').toContain('hell');

expect('hello').toHaveLength(5);

expect('hello').toMatch(/^hell/);

expect({a: 1, b: 2}).toHaveProperty('a');

expect({a: 1, b: 2}).toHaveProperty('a', 1);

expect({a: [{b: 2}]}).toHaveProperty('a[0].b', 2);

expect([1, 2, 3]).toContain(1);

expect([
  {a: 1},
  {b: 2},
  {c: 3},
]).toContainEqual({a: 1});

expect([1, 2, 3]).toHaveLength(3);

expect(new Set([1, 2, 3])).toContain(1);

expect(new Set([
  {a: 1},
  {b: 2},
  {c: 3},
])).toContainEqual({a: 1});

expect(() => { throw new Error('hello') })
  .toThrow('hello');

expect(() => { throw new Error('hello') })
  .toThrow(/^hell/);

expect(() => { throw new Error('hello') })
  .toThrow(Error);

await expect.poll(async () => {
  return Math.random();
}).toBeGreaterThan(0.1);

await expect.poll(async () => {
  return Math.random();
}, {
  // default: [100, 250, 500, 1000]
  intervals: [1000, 2000, 3000, 4000, 5000],
}).toBeGreaterThan(0.1);

await expect.poll(async () => {
  return Math.random();
}, {
  // default: 1000 * 5
  timeout: 1000 * 60,
}).toBeGreaterThan(0.1);

await expect(async () => {
  expect(Math.random()).toBeGreaterThan(0.1);
}).toPass();

await expect(async () => {
  expect(Math.random()).toBeGreaterThan(0.1);
}).toPass({
  // default: [100, 250, 500, 1000]
  intervals: [1000, 2000, 3000, 4000, 5000],
});