New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@playwright/test

Package Overview
Dependencies
Maintainers
6
Versions
2496
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@playwright/test - npm Package Compare versions

Comparing version 0.1112.0-alpha2 to 0.1112.0-alpha3

cli.js

6

out/index.d.ts

@@ -246,4 +246,10 @@ /**

export default test;
export declare const it: folio.TestType<PlaywrightTestArgs & PlaywrightTestOptions, PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
export declare const describe: (typeof test)['describe'];
export declare const beforeEach: (inner: (args: PlaywrightTestArgs & PlaywrightTestOptions & PlaywrightWorkerArgs & PlaywrightWorkerOptions, testInfo: folio.TestInfo) => any) => void;
export declare const afterEach: (inner: (args: PlaywrightTestArgs & PlaywrightTestOptions & PlaywrightWorkerArgs & PlaywrightWorkerOptions, testInfo: folio.TestInfo) => any) => void;
export declare const beforeAll: (inner: (args: PlaywrightWorkerArgs & PlaywrightWorkerOptions, workerInfo: folio.WorkerInfo) => any) => void;
export declare const afterAll: (inner: (args: PlaywrightWorkerArgs & PlaywrightWorkerOptions, workerInfo: folio.WorkerInfo) => any) => void;
export declare type PlaywrightTestProject<TestArgs = {}, WorkerArgs = {}> = folio.Project<PlaywrightTestOptions & TestArgs, PlaywrightWorkerOptions & WorkerArgs>;
export declare type PlaywrightTestConfig<TestArgs = {}, WorkerArgs = {}> = folio.Config<PlaywrightTestOptions & TestArgs, PlaywrightWorkerOptions & WorkerArgs>;
//# sourceMappingURL=index.d.ts.map

20

out/index.js

@@ -40,14 +40,6 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.test = void 0;
exports.afterAll = exports.beforeAll = exports.afterEach = exports.beforeEach = exports.describe = exports.it = exports.test = void 0;
const folio = __importStar(require("folio"));
const fs = __importStar(require("fs"));
const util = __importStar(require("util"));
let headedOption;
try {
headedOption = folio.registerCLIOption('headed', 'Run tests in headed browsers (default: headless)', { type: 'boolean' });
}
catch (e) {
if (!e.message.includes('must be called from a configuration file'))
throw e;
}
/**

@@ -64,2 +56,4 @@ * These tests are executed in Playwright environment that launches the browser

browser: [async ({ playwright, browserName, headless, channel, launchOptions }, use) => {
if (!['chromium', 'firefox', 'webkit'].includes(browserName))
throw new Error(`Unexpected browserName "${browserName}", must be one of "chromium", "firefox" or "webkit"`);
const options = {

@@ -73,3 +67,3 @@ handleSIGINT: false,

options.channel = channel;
if (headedOption && headedOption.value)
if (process.env.PWTEST_HEADED)
options.headless = false;

@@ -179,2 +173,8 @@ const browser = await playwright[browserName].launch(options);

exports.default = exports.test;
exports.it = exports.test;
exports.describe = exports.test.describe;
exports.beforeEach = exports.test.beforeEach;
exports.afterEach = exports.test.afterEach;
exports.beforeAll = exports.test.beforeAll;
exports.afterAll = exports.test.afterAll;
//# sourceMappingURL=index.js.map

11

package.json
{
"name": "@playwright/test",
"version": "0.1112.0-alpha2",
"version": "0.1112.0-alpha3",
"license": "Apache-2.0",

@@ -8,2 +8,5 @@ "author": {

},
"bin": {
"pwtest": "./cli.js"
},
"engines": {

@@ -18,3 +21,3 @@ "node": ">=10.17.0"

"prepublishOnly": "rm -rf out && npm run build",
"test": "folio -c test/"
"test": "node ./cli.js -c test"
},

@@ -25,4 +28,3 @@ "repository": "github:Microsoft/playwright-test",

"dependencies": {
"folio": "=0.4.0-alpha18",
"playwright": "=1.11.1",
"folio": "=0.4.0-alpha20",
"rimraf": "^3.0.2"

@@ -36,4 +38,5 @@ },

"eslint-plugin-notice": "^0.9.10",
"playwright": "=1.11.1",
"typescript": "^4.0.2"
}
}

575

README.md

@@ -37,6 +37,7 @@ # ⚠️ This project is not ready for production. Stay tuned! ⚠️

Create `tests/foo.spec.ts` to define your test. The test function uses the [`page`][page] argument for browser automation.
Create `tests/example.spec.ts` to define your test. The test function uses the [`page`][page] argument for browser automation.
```ts
import { test, expect } from "@playwright/test";
```js
// tests/example.spec.js
const { test, expect } = require("@playwright/test");

@@ -50,2 +51,18 @@ test("is a basic test with the page", async ({ page }) => {

<details>
<summary> TypeScript version </summary>
```ts
// tests/example.spec.ts
import { test, expect } from "@playwright/test";
test("is a basic test with the page", async ({ page }) => {
await page.goto("https://playwright.dev/");
const name = await page.innerText(".navbar__title");
expect(name).toBe("Playwright");
});
```
</details>
<br>
Playwright test runner is based on the [Folio] framework, and includes all the features available in Folio. For example, Playwright test runner provides test fixtures for browser primitives.

@@ -64,3 +81,3 @@

# Assuming that test files are in the tests directory.
npx folio -c tests
npx pwtest -c tests
```

@@ -76,4 +93,5 @@

```ts
import { test, expect } from "@playwright/test";
```js
// tests/example.spec.js
const { test, expect } = require("@playwright/test");

@@ -93,11 +111,36 @@ test.describe("feature foo", () => {

<details>
<summary> TypeScript version </summary>
```ts
// tests/example.spec.ts
import { test, expect } from "@playwright/test";
test.describe("feature foo", () => {
test.beforeEach(async ({ page }) => {
// Go to the starting url before each test.
await page.goto("https://my.start.url/feature-foo");
});
test("is working correctly", async ({ page }) => {
// Assertions use the expect API.
expect(page.url()).toBe("https://my.start.url/feature-foo");
});
});
```
</details>
<br>
### Write a configuration file
Create `config.ts` to configure your tests: specify browser launch options, run tests in multiple browsers and much more. Here is an example configuration that runs every test in Chromium, Firefox and WebKit.
Create `pwtest.config.ts` file to configure your tests: specify browser launch options, run tests in multiple browsers and much more. Here is an example configuration that runs every test in Chromium, Firefox and WebKit.
```ts
import { PlaywrightTestConfig } from "@playwright/test";
```js
// pwtest.config.js
module.exports = {
// Each test is given 30 seconds.
timeout: 30000,
const config: PlaywrightTestConfig = {
timeout: 30000, // Each test is given 30 seconds.
// Test files are in the "tests" directory.
testDir: 'tests',

@@ -134,25 +177,82 @@ // A project per browser, each running all the tests.

};
export default config;
```
<details>
<summary> TypeScript version </summary>
```ts
// pwtest.config.ts
import { PlaywrightTestConfig } from "@playwright/test";
const config: PlaywrightTestConfig = {
// Each test is given 30 seconds.
timeout: 30000,
// Test files are in the "tests" directory.
testDir: 'tests',
// A project per browser, each running all the tests.
projects: [
{
name: 'chromium',
use: {
browserName: 'chromium',
headless: true,
viewport: { width: 1280, height: 720 },
},
},
{
name: 'webkit',
use: {
browserName: 'webkit',
headless: true,
viewport: { width: 1280, height: 720 },
},
},
{
name: 'firefox',
use: {
browserName: 'firefox',
headless: true,
viewport: { width: 1280, height: 720 },
},
}
],
};
export default config;
```
</details>
<br>
### Run the test suite
Tests can be run in single or multiple browsers, in parallel or sequentially.
Tests can be run in single or multiple browsers, in parallel or sequentially, using the underlying [Folio command line][folio-cli]:
```sh
# Run all tests across Chromium, Firefox and WebKit
$ npx folio --config=config.ts
- Run all tests across Chromium, Firefox and WebKit
```sh
npx pwtest
```
# Run tests on a single browser
$ npx folio --config=config.ts --project=chromium
- Run tests on a single browser
```sh
npx pwtest --project=chromium
```
# Run tests sequentially
$ npx folio --config=config.ts --workers=1
- Run tests sequentially
```sh
npx pwtest --workers=1
```
# Retry failing tests
$ npx folio --config=config.ts --retries=2
- Retry failing tests
```sh
npx pwtest --retries=2
```
# See all options
$ npx folio --help
```
- See all options
```sh
npx pwtest --help
```

@@ -168,3 +268,3 @@ Refer to the [command line documentation][folio-cli] for all options.

"scripts": {
"test": "npx folio --config=config.ts"
"test": "npx pwtest"
}

@@ -182,4 +282,5 @@ }

```ts
import { test } from "@playwright/test";
```js
// tests/example.spec.js
const { test } = require("@playwright/test");

@@ -193,2 +294,19 @@ test("tests on multiple web pages", async ({ context }) => {

<details>
<summary> TypeScript version </summary>
```ts
// tests/example.spec.ts
import { test } from "@playwright/test";
test("tests on multiple web pages", async ({ context }) => {
const pageFoo = await context.newPage();
const pageBar = await context.newPage();
// Test function
});
```
</details>
<br>
### Mobile emulation

@@ -198,9 +316,9 @@

```ts
// config.ts
import { PlaywrightTestConfig } from "@playwright/test";
import { devices } from "playwright";
```js
// pwtest.config.js
const { devices } = require("playwright");
const config: PlaywrightTestConfig = {
module.exports = {
timeout: 30000,
testDir: 'tests',
projects: [

@@ -217,5 +335,32 @@ {

};
export default config;
```
<details>
<summary> TypeScript version </summary>
```ts
// pwtest.config.ts
import { PlaywrightTestConfig } from "@playwright/test";
import { devices } from "playwright";
const config: PlaywrightTestConfig = {
timeout: 30000,
testDir: 'tests',
projects: [
{
name: 'chromium',
use: {
browserName: 'chromium',
headless: true,
...devices["Pixel 2"],
},
},
],
};
export default config;
```
</details>
<br>
### Network mocking

@@ -225,5 +370,5 @@

```ts
// In foo.spec.ts
import { test, expect } from "@playwright/test";
```js
// tests/example.spec.js
const { test, expect } = require("@playwright/test");

@@ -244,2 +389,26 @@ test.beforeEach(async ({ context }) => {

<details>
<summary> TypeScript version </summary>
```ts
// tests/example.spec.ts
import { test, expect } from "@playwright/test";
test.beforeEach(async ({ context }) => {
// Block any css requests for each test in this file.
await context.route(/.css/, route => route.abort());
});
test("loads page without css", async ({ page }) => {
// Alternatively, block any png requests just for this test.
await page.route(/.png/, route => route.abort());
// Test function code.
await page.goto("https://stackoverflow.com");
});
```
</details>
<br>
### Visual comparisons

@@ -249,4 +418,5 @@

```ts
import { test, expect } from "@playwright/test";
```js
// tests/example.spec.js
const { test, expect } = require("@playwright/test");

@@ -260,2 +430,19 @@ test("compares page screenshot", async ({ page }) => {

<details>
<summary> TypeScript version </summary>
```ts
// tests/example.spec.ts
import { test, expect } from "@playwright/test";
test("compares page screenshot", async ({ page }) => {
await page.goto("https://stackoverflow.com");
const screenshot = await page.screenshot();
expect(screenshot).toMatchSnapshot(`test.png`, { threshold: 0.2 });
});
```
</details>
<br>
On first execution, this will generate golden snapshots. Subsequent runs will compare against the golden snapshots. To update golden snapshots with new actuals, run with the `--update-snapshots` flag.

@@ -265,3 +452,3 @@

# Update golden snapshots when they differ from actual
npx folio --update-snapshots
npx pwtest --update-snapshots
```

@@ -274,6 +461,6 @@

Create a `LoginPage` helper class to encapsulate common operations on the login page.
```ts
// login-page.ts
export class LoginPage {
constructor(page) {
```js
// tests/login-page.js
class LoginPage {
constructor(page: Page) {
this.page = page;

@@ -292,11 +479,41 @@ }

}
exports.LoginPage = LoginPage;
```
<details>
<summary> TypeScript version </summary>
```ts
// tests/login-page.ts
import type { Page } from "playwright";
export class LoginPage {
page: Page;
constructor(page: Page) {
this.page = page;
}
async goto() {
await this.page.goto("https://example.com/login");
}
async login() {
await this.page.fill("#username", TEST_USERNAME);
await this.page.fill("#password", TEST_PASSWORD);
await this.page.click("text=Login");
}
}
```
</details>
<br>
Use the `LoginPage` class in the tests.
```ts
// my.spec.ts
import { test, expect } from "@playwright/test";
import { LoginPage } from "./login-page";
```js
// tests/example.spec.js
const { test, expect } = require("@playwright/test");
const { LoginPage } = require("./login-page");
test('login works', async ({ page }) => {
test("login works", async ({ page }) => {
// Create the login page and perform operations.

@@ -312,2 +529,24 @@ const loginPage = new LoginPage(page);

<details>
<summary> TypeScript version </summary>
```ts
// tests/example.spec.ts
import { test, expect } from "@playwright/test";
import { LoginPage } from "./login-page";
test("login works", async ({ page }) => {
// Create the login page and perform operations.
const loginPage = new LoginPage(page);
await loginPage.goto();
await loginPage.login();
// Verify it worked.
expect(await page.textContent("#user-info")).toBe("Welcome, Test User!");
});
```
</details>
<br>
-----------

@@ -327,11 +566,14 @@

```ts
// config.ts
import { PlaywrightTestConfig } from "@playwright/test";
const config: PlaywrightTestConfig = {
```js
// pwtest.config.js
module.exports = {
// Each test is given 90 seconds.
timeout: 90000,
// Failing tests will be retried at most two times.
retries: 2,
// Test files are in the "tests" directory.
testDir: 'tests',
projects: [

@@ -357,5 +599,47 @@ {

};
export default config;
```
<details>
<summary> TypeScript version </summary>
```ts
// pwtest.config.ts
import { PlaywrightTestConfig } from "@playwright/test";
const config: PlaywrightTestConfig = {
// Each test is given 90 seconds.
timeout: 90000,
// Failing tests will be retried at most two times.
retries: 2,
// Test files are in the "tests" directory.
testDir: 'tests',
projects: [
{
name: 'chromium',
use: {
browserName: 'chromium',
// Launch options
headless: false,
slowMo: 50,
// Context options
viewport: { width: 800, height: 600 },
ignoreHTTPSErrors: true,
// Testing options
video: 'retain-on-failure',
},
},
],
};
export default config;
```
</details>
<br>
#### Locally in the test file

@@ -365,5 +649,5 @@

```ts
// my.spec.ts
import { test, expect } from "@playwright/test";
```js
// tests/example.spec.js
const { test, expect } = require("@playwright/test");

@@ -378,2 +662,20 @@ // Run tests in this file with portrait-like viewport.

<details>
<summary> TypeScript version </summary>
```ts
// tests/example.spec.ts
import { test, expect } from "@playwright/test";
// Run tests in this file with portrait-like viewport.
test.use({ viewport: { width: 600, height: 900 } });
test('my test', async ({ page }) => {
// Test code goes here.
});
```
</details>
<br>
#### Available options

@@ -397,5 +699,8 @@

Most notable testing options from [Folio documentation][folio]:
- `forbidOnly: boolean` - Whether to exit with an error if any tests are marked as `test.only`. Useful on CI.
- `reporter: 'dot' | 'line' | 'list'` - Choose a reporter: minimalist `dot`, concise `line` or detailed `list`. See [Folio reporters][folio-reporters] for more details.
- `retries: number` - Each failing test will be retried up to the certain number of times.
- `testDir: string` - Directory where test runner should search for test files.
- `testMatch: (string | RegExp)[]` - Patterns to find test files, for example `/.*spec\.js/`.
- `testIgnore: (string | RegExp)[]` - Patterns to ignore when looking for test files, for example `/test_assets/`.
- `timeout: number` - Timeout in milliseconds for each test.

@@ -408,3 +713,6 @@ - `workers: number` - The maximum number of worker processes to run in parallel.

```ts
```js
// tests/example.spec.js
const { test, expect } = require("@playwright/test");
test("should be skipped on firefox", async ({ page, browserName }) => {

@@ -416,2 +724,18 @@ test.skip(browserName === "firefox", "optional description for the skip");

<details>
<summary> TypeScript version </summary>
```ts
// tests/example.spec.ts
import { test, expect } from "@playwright/test";
test("should be skipped on firefox", async ({ page, browserName }) => {
test.skip(browserName === "firefox", "optional description for the skip");
// Test function
});
```
</details>
<br>
### Run tests in parallel

@@ -421,24 +745,46 @@

```sh
# Run just a single test at a time - no parallelization
npx folio --workers=1
- Run just a single test at a time - no parallelization
```sh
npx pwtest --workers=1
```
# Run up to 10 tests in parallel
npx folio --workers=10
```
- Run up to 10 tests in parallel
```sh
npx pwtest --workers=10
```
```ts
// config.ts
import { PlaywrightTestConfig } from "@playwright/test";
- Different value for CI
```js
// pwtest.config.js
module.exports = {
// No parallelization on CI, default value locally
worker: process.env.CI ? 1 : undefined,
testDir: 'tests',
projects: [
// Your projects go here
],
};
```
const config: PlaywrightTestConfig = {
// No parallelization on CI, default value locally.
worker: process.env.CI ? 1 : undefined,
projects: [
// Your projects go here
],
};
export default config;
```
<details>
<summary> TypeScript version </summary>
```ts
// pwtest.config.ts
import { PlaywrightTestConfig } from "@playwright/test";
const config: PlaywrightTestConfig = {
// No parallelization on CI, default value locally
worker: process.env.CI ? 1 : undefined,
testDir: 'tests',
projects: [
// Your projects go here
],
};
export default config;
```
</details>
<br>
By default, test runner chooses the number of workers based on available CPUs.

@@ -451,15 +797,14 @@

```sh
npx folio --reporter=line
npx folio --reporter=dot
npx folio --reporter=list
npx pwtest --reporter=line
npx pwtest --reporter=dot
npx pwtest --reporter=list
```
Alternatively, you can specify the reporter in the configuration file.
```ts
// config.ts
import { PlaywrightTestConfig } from "@playwright/test";
const config: PlaywrightTestConfig = {
```js
// pwtest.config.js
module.exports = {
// Concise 'dot' on CI, more interactive 'list' when running locally
reporter: process.env.CI ? 'dot' : 'line',
testDir: 'tests',
projects: [

@@ -469,5 +814,24 @@ // Your projects go here

};
export default config;
```
<details>
<summary> TypeScript version </summary>
```ts
// pwtest.config.ts
import { PlaywrightTestConfig } from "@playwright/test";
const config: PlaywrightTestConfig = {
// Concise 'dot' on CI, more interactive 'list' when running locally
reporter: process.env.CI ? 'dot' : 'line',
testDir: 'tests',
projects: [
// Your projects go here
],
};
export default config;
```
</details>
<br>
#### Export JUnit or JSON report

@@ -477,7 +841,6 @@

```ts
// config.ts
import { PlaywrightTestConfig } from "@playwright/test";
const config: PlaywrightTestConfig = {
```js
// pwtest.config.js
module.exports = {
testDir: 'tests',
reporter: [

@@ -490,3 +853,3 @@ // Live output to the terminal

{ name: 'json', outputFile: 'report.json' },
]
],
projects: [

@@ -496,5 +859,31 @@ // Your projects go here

};
export default config;
```
<details>
<summary> TypeScript version </summary>
```ts
// pwtest.config.ts
import { PlaywrightTestConfig } from "@playwright/test";
const config: PlaywrightTestConfig = {
testDir: 'tests',
reporter: [
// Live output to the terminal
'list',
// JUnit compatible xml report
{ name: 'junit', outputFile: 'report.xml' },
// JSON file with test results
{ name: 'json', outputFile: 'report.json' },
],
projects: [
// Your projects go here
],
};
export default config;
```
</details>
<br>
[multi-page]: https://playwright.dev/docs/multi-pages

@@ -501,0 +890,0 @@ [browser]: https://playwright.dev/docs/api/class-browser

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc