@playwright/test

Highlights

This patch includes improvements to the TypeScript support and the following bug fixes:

https://github.com/microsoft/playwright/issues/11550 - [REGRESSION]: Errors inside route handler does not lead to unhandled rejections anymore https://github.com/microsoft/playwright/issues/11552 - [BUG] Could not resolve "C:\repo\framework\utils" in file C:\repo\tests\test.ts.

Browser Versions

• Chromium 99.0.4812.0
• Mozilla Firefox 95.0
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 97
• Microsoft Edge 97

<a href="https://youtu.be/ABLYpw2BN_g"></a> <a href="https://youtu.be/ABLYpw2BN_g">Playwright v1.18 updates</a>

Locator Improvements

• locator.dragTo(locator)
• expect(locator).toBeChecked({ checked })
• Each locator can now be optionally filtered by the text it contains:

  await page.locator('li', { hasText: 'my item' }).locator('button').click();
  

  Read more in locator documentation.

Testing API improvements

• expect(response).toBeOK()
• testInfo.attach()
• test.info()

Improved TypeScript Support

1. Playwright Test now respects tsconfig.json's baseUrl and paths, so you can use aliases
2. There is a new environment variable PW_EXPERIMENTAL_TS_ESM that allows importing ESM modules in your TS code, without the need for the compile step. Don't forget the .js suffix when you are importing your esm modules. Run your tests as follows:

npm i --save-dev @playwright/test@1.18.0
PW_EXPERIMENTAL_TS_ESM=1 npx playwright test

Create Playwright

The npm init playwright command is now generally available for your use:

# Run from your project's root directory
npm init playwright
# Or create a new project
npm init playwright new-project

This will scaffold everything needed to get started with Playwright Test: configuration file, optionally add examples, a GitHub Action workflow and a first test example.spec.ts.

New APIs & changes

• new testCase.repeatEachIndex API
• acceptDownloads option now defaults to true

Breaking change: custom config options

Custom config options are a convenient way to parametrize projects with different values. Learn more in the parametrization guide.

Previously, any fixture introduced through test.extend could be overridden in the testProject.use config section. For example,

// WRONG: THIS SNIPPET DOES NOT WORK SINCE v1.18.

// fixtures.js
const test = base.extend({
  myParameter: 'default',
});

// playwright.config.js
module.exports = {
  use: {
    myParameter: 'value',
  },
};

The proper way to make a fixture parametrized in the config file is to specify option: true when defining the fixture. For example,

// CORRECT: THIS SNIPPET WORKS SINCE v1.18.

// fixtures.js
const test = base.extend({
  // Fixtures marked as "option: true" will get a value specified in the config,
  // or fallback to the default value.
  myParameter: ['default', { option: true }],
});

// playwright.config.js
module.exports = {
  use: {
    myParameter: 'value',
  },
};

Browser Versions

• Chromium 99.0.4812.0
• Mozilla Firefox 95.0
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 97
• Microsoft Edge 97

---

(1.18.0-beta-1642620709000)

Locator Improvements

• locator.dragTo(locator)
• expect(locator).toBeChecked({ checked })
• Each locator can now be optionally filtered by the text it contains:

  await page.locator('li', { hasText: 'my item' }).locator('button').click();
  

  Read more in locator documentation.

Testing API improvements

• expect(response).toBeOK()
• testInfo.attach()
• test.info()

Improved TypeScript Support

1. Playwright Test now respects tsconfig.json's baseUrl and paths, so you can use aliases
2. There is a new environment variable PW_EXPERIMENTAL_TS_ESM that allows importing ESM modules in your TS code, without the need for the compile step. Don't forget the .js suffix when you are importing your esm modules. Run your tests as follows:

npm i --save-dev @playwright/test@1.18.0-rc1
PW_EXPERIMENTAL_TS_ESM=1 npx playwright test

Create Playwright

The npm init playwright command is now generally available for your use:

# Run from your project's root directory
npm init playwright
# Or create a new project
npm init playwright new-project

This will scaffold everything needed to get started with Playwright Test: configuration file, optionally add examples, a GitHub Action workflow and a first test example.spec.ts.

New APIs & changes

• new testCase.repeatEachIndex API
• new option fixtures
• acceptDownloads option now defaults to true

Browser Versions

• Chromium 99.0.4812.0
• Mozilla Firefox 95.0
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 97
• Microsoft Edge 97

---