Code Monkey home page Code Monkey logo

microsoft / playwright Goto Github PK

View Code? Open in Web Editor NEW
63.5K 463.0 3.4K 154.19 MB

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

Home Page: https://playwright.dev

License: Apache License 2.0

JavaScript 0.71% Shell 0.45% TypeScript 89.42% HTML 5.32% CSS 1.47% Batchfile 0.01% Objective-C 0.75% Makefile 0.01% CMake 0.03% C++ 1.34% C 0.09% Python 0.04% Java 0.18% C# 0.04% PowerShell 0.05% Svelte 0.04% Vue 0.05%
playwright testing automation webkit firefox e2e-testing web chrome electron javascript

playwright's Introduction

๐ŸŽญ Playwright

npm version Chromium version Firefox version WebKit version

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

Linux macOS Windows
Chromium 127.0.6533.17 โœ… โœ… โœ…
WebKit 17.4 โœ… โœ… โœ…
Firefox 127.0 โœ… โœ… โœ…

Headless execution is supported for all browsers on all platforms. Check out system requirements for details.

Looking for Playwright for Python, .NET, or Java?

Installation

Playwright has its own test runner for end-to-end tests, we call it Playwright Test.

Using init command

The easiest way to get started with Playwright Test is to run the init command.

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

This will create a configuration file, optionally add examples, a GitHub Action workflow and a first test example.spec.ts. You can now jump directly to writing assertions section.

Manually

Add dependency and install browsers.

npm i -D @playwright/test
# install supported browsers
npx playwright install

You can optionally install only selected browsers, see install browsers for more details. Or you can install no browsers at all and use existing browser channels.

Capabilities

Resilient โ€ข No flaky tests

Auto-wait. Playwright waits for elements to be actionable prior to performing actions. It also has a rich set of introspection events. The combination of the two eliminates the need for artificial timeouts - a primary cause of flaky tests.

Web-first assertions. Playwright assertions are created specifically for the dynamic web. Checks are automatically retried until the necessary conditions are met.

Tracing. Configure test retry strategy, capture execution trace, videos and screenshots to eliminate flakes.

No trade-offs โ€ข No limits

Browsers run web content belonging to different origins in different processes. Playwright is aligned with the architecture of the modern browsers and runs tests out-of-process. This makes Playwright free of the typical in-process test runner limitations.

Multiple everything. Test scenarios that span multiple tabs, multiple origins and multiple users. Create scenarios with different contexts for different users and run them against your server, all in one test.

Trusted events. Hover elements, interact with dynamic controls and produce trusted events. Playwright uses real browser input pipeline indistinguishable from the real user.

Test frames, pierce Shadow DOM. Playwright selectors pierce shadow DOM and allow entering frames seamlessly.

Full isolation โ€ข Fast execution

Browser contexts. Playwright creates a browser context for each test. Browser context is equivalent to a brand new browser profile. This delivers full test isolation with zero overhead. Creating a new browser context only takes a handful of milliseconds.

Log in once. Save the authentication state of the context and reuse it in all the tests. This bypasses repetitive log-in operations in each test, yet delivers full isolation of independent tests.

Powerful Tooling

Codegen. Generate tests by recording your actions. Save them into any language.

Playwright inspector. Inspect page, generate selectors, step through the test execution, see click points and explore execution logs.

Trace Viewer. Capture all the information to investigate the test failure. Playwright trace contains test execution screencast, live DOM snapshots, action explorer, test source and many more.

Looking for Playwright for TypeScript, JavaScript, Python, .NET, or Java?

Examples

To learn how to run these Playwright Test examples, check out our getting started docs.

Page screenshot

This code snippet navigates to Playwright homepage and saves a screenshot.

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

test('Page Screenshot', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.screenshot({ path: `example.png` });
});

Mobile and geolocation

This snippet emulates Mobile Safari on a device at given geolocation, navigates to maps.google.com, performs the action and takes a screenshot.

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

test.use({
  ...devices['iPhone 13 Pro'],
  locale: 'en-US',
  geolocation: { longitude: 12.492507, latitude: 41.889938 },
  permissions: ['geolocation'],
})

test('Mobile and geolocation', async ({ page }) => {
  await page.goto('https://maps.google.com');
  await page.getByText('Your location').click();
  await page.waitForRequest(/.*preview\/pwa/);
  await page.screenshot({ path: 'colosseum-iphone.png' });
});

Evaluate in browser context

This code snippet navigates to example.com, and executes a script in the page context.

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

test('Evaluate in browser context', async ({ page }) => {
  await page.goto('https://www.example.com/');
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    }
  });
  console.log(dimensions);
});

Intercept network requests

This code snippet sets up request routing for a page to log all network requests.

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

test('Intercept network requests', async ({ page }) => {
  // Log and continue all network requests
  await page.route('**', route => {
    console.log(route.request().url());
    route.continue();
  });
  await page.goto('http://todomvc.com');
});

Resources

playwright's People

Contributors

alexneo2003 avatar andarist avatar anishkny avatar arjunattam avatar aslushnikov avatar avodovnik avatar campersau avatar debs-obrien avatar dependabot[bot] avatar dgozman avatar dpino avatar elaichenkov avatar github-actions[bot] avatar jfgreffier avatar joeleinbinder avatar kblok avatar mastrzyz avatar meir017 avatar mrienstra avatar mxschmitt avatar nav-2d avatar pavelfeldman avatar playwrightmachine avatar q66 avatar regseb avatar ruifigueira avatar rwoll avatar sand4rt avatar sidharthv96 avatar yury-s avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

playwright's Issues

UnhandledPromiseRejectionWarning: Error: Failed to launch browser!

First of all, thanks for the work on this project! The prospect of a more platform-agnostic alternative to Puppeteer is exciting.

I'm trying to run the example project locally and ran into an issue, hoping maybe someone can point me in the right direction.

The issue

I have a file, test.ts:

const pw = require('playwright');

(async () => {
  const browser = await pw.firefox.launch({ headless: false }); // 'webkit', 'chromium', 'firefox'
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://www.example.com/');
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})();

When I run node test.ts I get the following error:

 UnhandledPromiseRejectionWarning: Error: Failed to launch browser!


TROUBLESHOOTING: https://github.com/Microsoft/playwright/blob/master/docs/troubleshooting.md

    at onClose (/mnt/c/Users/joshs/repos/Bullet/api/node_modules/playwright-core/lib/server/processLauncher.js:135:20)
    at Interface.helper_1.helper.addEventListener (/mnt/c/Users/joshs/repos/Bullet/api/node_modules/playwright-core/lib/server/processLauncher.js:128:65)
    at Interface.emit (events.js:202:15)
    at Interface.close (readline.js:395:8)
    at Socket.onend (readline.js:173:10)
    at Socket.emit (events.js:202:15)
    at endReadableNT (_stream_readable.js:1129:12)
    at processTicksAndRejections (internal/process/next_tick.js:76:17)
  -- ASYNC --
    at FFPlaywright.<anonymous> (/mnt/c/Users/joshs/repos/Bullet/api/node_modules/playwright-core/lib/helper.js:54:23)
    at FFPlaywright.launch (/mnt/c/Users/joshs/repos/Bullet/api/node_modules/playwright-core/lib/server/ffPlaywright.js:63:35)
    at FFPlaywright.<anonymous> (/mnt/c/Users/joshs/repos/Bullet/api/node_modules/playwright-core/lib/helper.js:55:31)
    at /mnt/c/Users/joshs/repos/Bullet/api/test.ts:4:36
    at Object.<anonymous> (/mnt/c/Users/joshs/repos/Bullet/api/test.ts:12:3)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)    
  -- ASYNC --
    at FFPlaywright.<anonymous> (/mnt/c/Users/joshs/repos/Bullet/api/node_modules/playwright-core/lib/helper.js:54:23)
    at /mnt/c/Users/joshs/repos/Bullet/api/test.ts:4:36
    at Object.<anonymous> (/mnt/c/Users/joshs/repos/Bullet/api/test.ts:12:3)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)    
    at Function.Module.runMain (internal/modules/cjs/loader.js:797:12) 
    at executeUserCode (internal/bootstrap/node.js:526:15)
(node:9422) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:9422) [DEP0018] DeprecationWarning: Unhandled promise rejections 
are deprecated. In the future, promise rejections that are not handled 
will terminate the Node.js process with a non-zero exit code.

What I'm running

I'm running WSL on Windows 10, Node 11.9.0.

What I've tried

I had similar code integrated more deeply into an application I'm working on. I pulled the code out into the simplest reproducible case I could, which is the code above.

I've tried switching between firefox, chromium, and webkit. I've also tried setting headless to false.

Any help or guidance you might be able to offer is appreciated!

page.selectOption

We want to be able to select an option by id, or elementhandle, or something. Not just by value.

Cannot find module ./errors

I try to install playwright.

npm i playwright

I got this.

sony@ubuntu:~/playground/playwright (master)$ npm install playwright

> [email protected] install /home/sony/playground/playwright/node_modules/playwright
> node install.js

(node:8609) UnhandledPromiseRejectionWarning: Error: Cannot find module './errors'
Require stack:
- /home/sony/playground/playwright/node_modules/playwright-core/lib/helper.js
- /home/sony/playground/playwright/node_modules/playwright-core/index.js
- /home/sony/playground/playwright/node_modules/playwright-core/download-browser.js
- /home/sony/playground/playwright/node_modules/playwright/install.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
    at Function.Module._load (internal/modules/cjs/loader.js:690:27)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/sony/playground/playwright/node_modules/playwright-core/lib/helper.js:19:18)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
(node:8609) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:8609) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
npm WARN saveError ENOENT: no such file or directory, open '/home/sony/playground/playwright/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/sony/playground/playwright/package.json'
npm WARN playwright No description
npm WARN playwright No repository field.
npm WARN playwright No README data
npm WARN playwright No license field.

+ [email protected]
added 46 packages from 35 contributors and audited 53 packages in 3.346s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities
sony@ubuntu:~/playground/playwright (master)$ node -v
v12.13.1
sony@ubuntu:~/playground/playwright (master)$ npm -v
6.13.6

is it normal?

waitForDialog

waitForDialog should also be able to auto resolve the dialog.

await page.evaluate(() => setTimeout(() => prompt('foo'), 500));
await page.waitForDialog({ respond: 'bar' });

WSL - Doesn't appear to Install Chromium

Using WSL WSL 2 on Windows 10 does not appear to install any browser when I yarn install. I have not tested it on WSL 1.

Running your reference examples results in:

$yarn install
yarn install v1.21.1
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.07s.
() /.../playwright $node main.js 
(node:1704) UnhandledPromiseRejectionWarning: Error: Chromium revision is not downloaded. Run "npm install" or "yarn install"
    at CRPlaywright.launchServer (/home/-/playwright/node_modules/playwright-core/lib/server/crPlaywright.js:87:23)
    at async CRPlaywright.launch (/home/-/playwright/node_modules/playwright-core/lib/server/crPlaywright.js:64:24)
    at async /home/-/playwright/main.js:4:21
  -- ASYNC --
    at CRPlaywright.<anonymous> (/home/-/playwright/node_modules/playwright-core/lib/helper.js:54:23)
    at CRPlaywright.launch (/home/-/playwright/node_modules/playwright-core/lib/server/crPlaywright.js:64:35)
    at CRPlaywright.<anonymous> (/home/-/playwright/node_modules/playwright-core/lib/helper.js:55:31)
    at /home/-/playwright/main.js:4:38
    at Object.<anonymous> (/home/-/playwright/main.js:9:3)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
  -- ASYNC --
    at CRPlaywright.<anonymous> (/home/-/playwright/node_modules/playwright-core/lib/helper.js:54:23)
    at /home/-/playwright/main.js:4:38
    at Object.<anonymous> (/home/-/playwright/main.js:9:3)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
    at internal/main/run_main_module.js:17:11
(node:1704) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:1704) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
// package.json
{
  "name": "playwright",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@types/node": "^13.1.8",
    "playwright": "^0.9.21"
  }
}
// main.ts
const playwright = require('playwright').chromium;  // Or 'firefox' or 'webkit'.

(async () => {
  const browser = await playwright.launch();
  const context = await browser.newContext();
  const page = await context.newPage('http://example.com');
  // other actions...
  await browser.close();
})();

Compiles to

"use strict";
// main.ts
const playwright = require('playwright').chromium; // Or 'firefox' or 'webkit'.
(async () => {
    const browser = await playwright.launch();
    const context = await browser.newContext();
    const page = await context.newPage('http://example.com');
    // other actions...
    await browser.close();
})();

NPM packages

We need to figure out what we want to publish on npm and actually publish it.

This should also take into account what environment variables, if any, that each package should respect. See #47 for the removed variables that we might want to restore.

generate .d.ts better than what's on definitelytyped

  • Types include descriptions from api.md
  • Private methods are excluded
  • Private intermediate types are excluded
  • Typed protocol for ChromiumSession
  • Don't lose type information from page.evaluate
  • Templated JSHandles
  • Always up to date with the API
  • Consider types part of the API, never break them
  • Enums for important string constants, e.g. LifecycleEvent and KeyboardKey.
  • Sort out waitFor's many call signatures

Logging and/or Progress indicators

It would be great to have some form of progress indicators, or logging output, when a flag is passed, like verbose.

At the moment when the script runs it looks like it hangs until done.

waitForElementEnabled

consider and input element that is disabled until the page is hydrated. Seems common,

It should also work for labels that point to a disabled element.

SSL peer certificate or SSH remote key was not OK

I'm getting the following error:

UnhandledPromiseRejectionWarning: Error: Navigation to https://stranger.nl/ failed: SSL peer certificate or SSH remote key was not OK.

Is there an option or configuration to disable SSL verification? But to my knowledge my website has a valid SSL certificate.

/Stefan

Electron support

Hey, very cool that it supports WebKit and Firefox. Do you have plans to support Electron?

waitForNodeIdle

Heuristic for not animating? This is ill-defined but necessary.

waitForNavigations

For sites that use history.pushState, they might do something like

history.pushState(null, null, 'http://a');
// wait
history.pushState(null, null, 'http://b');
// wait
history.pushState(null, null, 'http://a');
// done

We can't use waitForFunction to check if the url is a, because then we might stop before the whole sequence has finished.

GPU/WebGL/WebGPU support?

Curious if this is supported. It would seem so, but I didn't see if this had been asked previously.

UnhandledPromiseRejectionWarning: Unhandled promise rejection

(node:22062) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 55)
(node:22062) UnhandledPromiseRejectionWarning: ReferenceError: URL is not defined
    at stripFragmentFromUrl (/Users/jo20066698/Documents/playwright-project/node_modules/playwright-core/lib/network.js:63:20)
    at new Request (/Users/jo20066698/Documents/playwright-project/node_modules/playwright-core/lib/network.js:82:21)
    at new WKInterceptableRequest (/Users/jo20066698/Documents/playwright-project/node_modules/playwright-core/lib/webkit/wkInterceptableRequest.js:43:24)
    at WKPage._onRequestWillBeSent (/Users/jo20066698/Documents/playwright-project/node_modules/playwright-core/lib/webkit/wkPage.js:493:25)
    at WKSession._sessionListeners.helper_1.helper.addEventListener.e (/Users/jo20066698/Documents/playwright-project/node_modules/playwright-core/lib/webkit/wkPage.js:166:100)
    at emitOne (events.js:116:13)
    at WKSession.emit (events.js:211:7)
    at Promise.resolve.then (/Users/jo20066698/Documents/playwright-project/node_modules/playwright-core/lib/webkit/wkConnection.js:127:47)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

My code from the actual website used as reference.

const pw = require('playwright');

(async () => {
  const browser = await pw.webkit.launch(); // or 'chromium', 'firefox'
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://www.apple.com/');
  await page.screenshot({ path: 'example2.png' });

  await browser.close();
})();

Any help would be appreciated.

ARIA or Semantic query engine?

While I will love to see the ShadowDOM support mentioned in #152 I would also like to promote the idea of adding an 'ARIA' or 'Semantic' query engine early on.

The idea here would be something similar to the queries provided by testing-library with its byRole or byLabelText queries.

A syntax like aria=role['textbox'] >> semantic=placeholder['Username'] would be especially powerful for testing without dependencies on specific HTML structure.

This would of course have to have ShadowDOM support to work correctly at this time I think.

WebKit Canvas element invisible on screenshot

When using page.screenshot on Webkit, Canvas elements appear to be invisible.

When running headless: false the canvas is visible in browser just not in screenshot.

It looks to be only on WebGL Canvas elements...

Chromium & Firefox work as intended.

Example

const pw = require('playwright');

(async () => {
  const browser = await pw.webkit.launch(); // or 'chromium', 'firefox'
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://pixijs.io/examples/#/demos-basic/container.js');

  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

Chromium
chromium

Firefox
firefox

WebKit
webkit

Remove Chromium APIs not supported by Firefox & WebKit at launch

  • Accessibility.*
  • BrowserContext
    • browserContext.overridePermissions
    • browserContext.clearPermissionOverrides
  • Element
    • elementHandle.boxModel
    • executionContext.queryObjects
  • Page
    • page.authenticate
    • page.emulateMediaType
    • page.emulateMediaFeatures
    • page.emulateTimezone
    • page.metrics
    • page.queryObjects
    • page.pdf
    • page.setBypassCSP
    • page.setGeolocation
    • page.setRequestInterception
    • page.setOfflineMode
  • Request
    • interception
    • response.fromCache()
    • response.fromServiceWorker()
    • response.remoteAddress
  • SecurityDetails.*
  • Touchscreen.*
  • Worker.*

WebKit build flags

WebKit has a lot of compile time flags that radically change its behavior. Each of our ports has different defaults. We should audit them and try to make each as close to safari as possible.

firefox protocol checking

It would be very nice to lint firefox against the juggle protocol. Requires a protocol.json exposed in juggler.

waitForClickable

A node might be hidden/obscured. We should be able to wait for clicking it to actually click it.

Is it possible to support IE 10 & 11 please?

I know right now there is work around to test IE with modern API.
I have a POC project to test it with puppeteer-ie package.
Here is the link. https://github.com/codesanook/Codesanook.Examples/blob/master/codesanook-examples-puppeteer-ie/specs/NavigationSpec.ts

However, it would be nice if there is built-in support by playwright.

From the statistic telling us that there are some people using IE and we cannot force them to use modern browsers, e.g. Edge. In fact, those who use IE are our value customers.
Therefore, supporting IE is very important to us.

I hope playwright team will consider supporting IE.
Thank you.

image

source (Desktop only)
https://gs.statcounter.com/browser-version-market-share/desktop/worldwide/#monthly-201812-201912

Full page screenshot not rendering correctly

Here is my code

const pw = require('playwright');

(async () => {
  const browser = await pw.chromium.launch(); // or 'chromium', 'firefox'
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://www.waze.com/');
  await page.screenshot({ 
      path: 'example.png',
      fullPage : true });

  await browser.close();
})();

example

If you see the content at the bottom of the page is not properly captured in screenshot. Any help will be appreciated.

Missing a few device defs for landscape variants

Randomly noticed that a few items didn't specify a "landscape" device:

Missing device for "iPhone 11 landscape"
Missing device for "iPhone 11 Pro landscape"
Missing device for "iPhone 11 Pro Max landscape"
Missing device for "Microsoft Lumia 550 landscape"

... So I hacked a quick linter to verify:

const devices = require("playwright").devices;

const deviceMap = new Map();
for (const device of devices) {
  deviceMap.set(device.name, device);
}

for (const name of deviceMap.keys()) {
  if (name.endsWith(" landscape")) continue;
  const landscapeName = `${name} landscape`;
  if (!deviceMap.has(landscapeName)) {
    const landscapeDevice = deviceMap.get(name);
    const {width, height} = landscapeDevice.viewport;
    landscapeDevice.name = landscapeName;
    landscapeDevice.viewport.width = height;
    landscapeDevice.viewport.height = width;
    console.log(`Missing device for "${landscapeName}", expected: ${JSON.stringify(landscapeDevice, null, 2)}`);
  } else {
    const portrait = deviceMap.get(name);
    const landscape = deviceMap.get(landscapeName);
    if (!(portrait.width === landscape.height && portrait.height === landscape.width)) {
      console.log(`${name} viewport ({width:${portrait.viewport.width},height:${portrait.viewport.height}}) does not match ${landscapeName} viewport ({width:${landscape.viewport.width},height=${landscape.viewport.height}})`);
    }
  }
}

OUTPUT

Missing device for "iPhone 11 landscape", expected:
{
  "name": "iPhone 11 landscape",
  "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1",
  "viewport": {
    "width": 896,
    "height": 414,
    "deviceScaleFactor": 2,
    "isMobile": true
  }
}

Missing device for "iPhone 11 Pro landscape", expected:
{
  "name": "iPhone 11 Pro landscape",
  "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1",
  "viewport": {
    "width": 812,
    "height": 375,
    "deviceScaleFactor": 3,
    "isMobile": true
  }
}

Missing device for "iPhone 11 Pro Max landscape", expected:
{
  "name": "iPhone 11 Pro Max landscape",
  "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1",
  "viewport": {
    "width": 896,
    "height": 414,
    "deviceScaleFactor": 3,
    "isMobile": true
  }
}

Missing device for "Microsoft Lumia 550 landscape", expected:
{
  "name": "Microsoft Lumia 550 landscape",
  "userAgent": "Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 550) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263",
  "viewport": {
    "width": 360,
    "height": 640,
    "deviceScaleFactor": 2,
    "isMobile": true
  }
}

Although, that "Lumia 550" definition looks possibly suspicious.

{
'name': 'Microsoft Lumia 550',
'userAgent': 'Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 550) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263',
'viewport': {
'width': 640,
'height': 360,
'deviceScaleFactor': 2,
'isMobile': true
}
},

It looks like the width > height, so it's possibly already the landscape definition, but incorrectly labeled (and we're missing the portrait definition).

$wait

elementHandleOrFrameOrPage.$wait(selector, predicate) - waits until the element matched by the selector matches the predicate.

Can't waitForSelector if the selector contains :focus or something else exotic

When we do waitForSelector, we poll on DOM mutations. But some things that can change the selectors an element matches against aren't DOM mutations. For example:

const focusedButtonPromise = page.waitForSelector('button:focus');
await page.focus('button');
// times out, because focus doesnt trigger a DOM mutation.
const focusedButton = await focusedButtonPromise; 

Would also effect

  • :focus-within
  • :active
  • :hover
  • :visited (currently broken for other reasons)
  • :empty
  • :valid

Maybe others.

I don't really want to wait on focus changes or value changes for every waitForSelector. Maybe a quick hack that also waits on rafs when the selector contains ":"?

Selenium grid alternative?

Are there any plans on supporting a multi-host infrastructure like selenium grid?
I'm just curious on what the authors' opinion is. Do you consider this as part of this project, or do you think it needs to be separate (like selenium grid is separate from WebDriver)

how can I make same behavior of CTRL + S?

Hello,

Thanks for doing this, I used puppeteer in past and can't wait to use this. I want to do save content of web page I'm currently visit and all related content (css, js, etc) like hit the ctrl + s on a browser ?

If question wasn't clear ( see this: pupeteer/issues/2433)

Thanks ๐Ÿ˜€

INTERNAL: run all the tests with npm test

We are cross browser for real now. Let's run all the tests on npm test.

EDIT: This issue seems to be search engine bait for people looking how to run tests their with playwright. This is talking about how to run playwright's own internal tests. Please file a new issue if you need help running your own tests with playwright.

Soft click/input

We should investigate precise click/input targeting based on "node + offset". Available options:

  • Make existing way more robust (various scrollIntoView/waitForIdle/etc improvements).
  • Soft click implemented entirely in the renderer process.
  • Something in the middle: trigger the whole input pipeline, but precisely position in the renderer (might run into input routing issues in the browser?).

Failing to set selectionStart on email type inputs

(testing Playwright and Studio on VSO login flow)

after #353 was merged, I ran into a new error in trying to fill in the email in the VSO login flow (screenshot below for reference)

Error: Evaluation failed: DOMException: Failed to set the 'selectionStart' 
property on 'HTMLInputElement': The input element's type ('email') 
does not support selection.

This error is caused by the lines at https://github.com/microsoft/playwright/blob/master/src/input.ts#L349 where we assume the selectionStart attribute exists on the input. After #353 this assumption is incorrect, since the email type does not support it.

    input.selectionStart = 0;
    input.selectionEnd = input.value.length;

Commenting these two lines fixes this particular issue, and I could send a PR to not execute these lines for email and other invalid types. Would that be a good idea?

Screen Shot 2020-01-03 at 10 16 43 AM

Playwright blocks Event loop

I am trying an example project with Playwright and Express.js
My code :

const express = require('express');
const blocked = require('blocked-at');
const app = express();
const PORT = 3000;
const URL = "https://www.cmegroup.com/confluence/pages/viewpage.action?navigatingVersions=true&pageId=78459756"
let browser;

app.get('/execute', async  (req, res) =>{
    console.log("Recieved req")
    let context = await browser.newContext();
    page = await context.newPage();
    await page.goto(URL);
    res.send('Completed')
});
app.listen(PORT, async () => {
    console.log("Starting playwright server")
    browser = await playwright.launch();
   console.log("Started playwright server")
    return;
})
blocked((time, stack, {type, resource}) => {
 console.log(`Blocked for ${time}ms, operation started here:`, stack,"TYPE :",type)
}, {resourcesCap: 100})

When I run the code and send 20 concurrent requests with JMeter to the http://localhost:3000/execute, I have got the following error

Blocked for 43.53386000061035ms, operation started here: [ '    at Socket.connect (net.js:912:7)',
  '    at Object.connect (net.js:156:17)',
  '    at Object.netConnect [as createConnection] (/home/lenovo/scripts/node_modules/ws/lib/websocket.js:684:14)',
  '    at new ClientRequest (_http_client.js:255:33)',
  '    at request (http.js:42:10)',
  '    at get (http.js:46:13)',
  '    at initAsClient (/home/lenovo/scripts/node_modules/ws/lib/websocket.js:555:31)',
  '    at new WebSocket (/home/lenovo/scripts/node_modules/ws/lib/websocket.js:70:7)',
  '    at Promise (/home/lenovo/scripts/node_modules/playwright-core/lib/platform.js:271:38)',
  '    at new Promise (<anonymous>)',
  '    at Object.createWebSocketTransport (/home/lenovo/scripts/node_modules/playwright-core/lib/platform.js:270:12)',
  '    at createTransport (/home/lenovo/scripts/node_modules/playwright-core/lib/webkit/wkBrowser.js:192:36)',
  '    at Function.connect (/home/lenovo/scripts/node_modules/playwright-core/lib/webkit/wkBrowser.js:43:33)',
  '    at WKBrowserServer.connect (/home/lenovo/scripts/node_modules/playwright-core/lib/server/wkPlaywright.js:42:53)',
  '    at WKBrowserServer.<anonymous> (/home/lenovo/scripts/node_modules/playwright-core/lib/helper.js:55:31)',
  '    at WKPlaywright.launch (/home/lenovo/scripts/node_modules/playwright-core/lib/server/wkPlaywright.js:68:23)' ] TYPE : TCPWRAP

After 20 concurrent requests, the next request is queued by the server and take a long time to get the response.
I am running this code on

  • Ubuntu 18
  • node v10.15.1

I've tried switching between firefox, chromium, and WebKit. The same issue happens in all of these browsers, hoping maybe someone can help me out of this.

Thanks in Advance.

URLMatchOptions

for waitForRequest/waitForResponse/waitForNavigation[

CSS selectors but for URLs.

Migration script from puppeteer

Nice library you all have here, it's unfortunate that this is not a new major version of puppeteer though. I think you all would gain a lot more adoption if you had a script to convert puppeteer tests to playwright tests. There should be a way of automatically doing this with a codemod.

Metrics API

Hi. I want to an API to measure pages' metrics, like https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pagemetrics. How about it ?

Motivation

I maintain https://github.com/reg-viz/storycap, which captures Storybook with puppeteer and want to migrate from puppeteer to playwright in order to provide options of multiple rendering engines.
We need the metics API because our tool uses Puppeteer's metrics ( especially LayoutCount and RecalcStyleCount) to watch whether the browser rendering pipeline is stable.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.