javascript - Is it possible to create custom commands in Playwright? - Stack Overflow

admin管理员组

文章数量:1355660

I'm looking for a way to write custom mands in Playwright like it's done in Cypress. Playwright Issues has one page related to it but I have never seen any code example.

I'm working on one test case where I'm trying to improve code reusability. Here's the code:

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

config();

let context;
let page;

test.beforeEach(async () => {
  context = await chromium.launchPersistentContext(
    'C:\\Users\\User\\AppData\\Local\\Microsoft\\Edge\\User Data\\Default',
    {
      headless: false,
      executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
    }
  );

  page = await context.newPage();
  await page.goto('http://localhost:3000/');
});

test.afterEach(async () => {
  await page.close();
  await context.close();
});

test('Sample test', async () => {
  await page.click('text=Open popup');
  await page.click('_react=Button >> nth=0');
  await page.click('text=Close popup');
});

I'm trying to create a function that will call hooks test.beforeEach() and test.afterEach() and the code inside them.

In the Playwright Issue page, it says that I need to move it to a separate Node module and then I would be able to use it but I'm struggling to understand how to do it.

I'm looking for a way to write custom mands in Playwright like it's done in Cypress. Playwright Issues has one page related to it but I have never seen any code example.

I'm working on one test case where I'm trying to improve code reusability. Here's the code:

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

config();

let context;
let page;

test.beforeEach(async () => {
  context = await chromium.launchPersistentContext(
    'C:\\Users\\User\\AppData\\Local\\Microsoft\\Edge\\User Data\\Default',
    {
      headless: false,
      executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
    }
  );

  page = await context.newPage();
  await page.goto('http://localhost:3000/');
});

test.afterEach(async () => {
  await page.close();
  await context.close();
});

test('Sample test', async () => {
  await page.click('text=Open popup');
  await page.click('_react=Button >> nth=0');
  await page.click('text=Close popup');
});

I'm trying to create a function that will call hooks test.beforeEach() and test.afterEach() and the code inside them.

In the Playwright Issue page, it says that I need to move it to a separate Node module and then I would be able to use it but I'm struggling to understand how to do it.

• javascript
• testing
• playwright

Share Improve this question Follow asked Nov 15, 2021 at 10:16 in43shin43sh 96322 gold badges1414 silver badges3737 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The example you're giving can be solved by implementing a custom fixture. Fixtures are @playwright/test's solution to customizing/extending the test framework. You can define your own objects (similar to browser, context, page) that you inject into your test, so the test has access to it. But they can also do things before and after each test such as setting up preconditions and tearing them down. You can also override existing fixtures.

For more information including examples have a look here: https://playwright.dev/docs/test-fixtures

本文标签： javascriptIs it possible to create custom commands in PlaywrightStack Overflow