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 130.0.6723.19 | โ | โ | โ |
WebKit 18.0 | โ | โ | โ |
Firefox 130.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?
Playwright has its own test runner for end-to-end tests, we call it Playwright Test.
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.
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.
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.
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.
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.
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?
To learn how to run these Playwright Test examples, check out our getting started docs.
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` });
});
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' });
});
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);
});
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');
});
playwright's People
Forkers
kblok arjunattam aslushnikov yury-s yanivefraim pavelfeldman joeleinbinder rajendraarora16 joshsaintjacque neuroradiology khromove iamsingularity tomaszszyborski michaelrcruz divyanshu-rawat anoop-gupt keppelen sekmet lyuji282 xwa130saucer chunyenhuang miguelgimenezgimenez bnb ashr flowertwig-org leohmoraes cuulee rbramwell edisplay 6c737133 safrizal harrisin2037 ddzy maxmellon chiyti p-g-krish yamafaktory cybernetics kazucocoa chronsyn nishants hilvio sebastianplsim buxxux awesome-archive csscheck jcloudyu srs231198 favianrizqulloh jacobjohansen unforeseenocean aguerram ernestosbarbosa parampavar xpilot barkarula hiteshdua1 abreu-dev shjunmiao modulexcite vigneshv01-ship-it raymondseger jamestse accuratequant honsa designtips blakesack saturninoabril cuylerstuwe jafffy edi2004 rileyseaburg marsalans poode aikusuma nalan1976 mahmudkuet11 joelgriffith oleg2010 trustyoo86 tonypro asmus003 kyleaday devenlu otherlibrary jperl topaxi ruslansoma hashseed doubleslashdesign2 pnpninja mathiasbynens chaturvedishashank12 tsuemura vinayasathyanarayana geekhuyang maddmin kappy-technologies-llp albertxiao saonamplaywright's Issues
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?
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.
context.cookies API
The cookies API should live on the browser context, not the page.
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.
.NET Bindings
It would be awesome if you had more bindings than Node. See https://github.com/kblok/puppeteer-sharp.
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.
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
URLMatchOptions
for waitForRequest/waitForResponse/waitForNavigation[
CSS selectors but for URLs.
WebKit: Multiple addScriptToEvaluateOnNewDocument
Page.setBootstrapScript implies there can only be one script that gets evaluated. We should change the backend to support multiple scripts, or concatenate scripts on the frontend.
multibrowser api documentation
We should have something like compat tables in the api docs. And have browser-specific d.ts.
Fix CapsLock everywhere
Is it being treated as a modifier?
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();
})();
If you see the content at the bottom of the page is not properly captured in screenshot. Any help will be appreciated.
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?).
Default profile for does not save data into specified folder
Browser's default profile directory (specified with user-data-dir) is not respected for cookies / localstorage for WebKit.
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.
webkit: force-create execution contexts
We currently force-create execution contexts in tests/utils.js - this should happen either in webkit itself, or on the webkit-side
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.
playwright/src/deviceDescriptors.ts
Lines 491 to 500 in b4209e9
It looks like the width > height, so it's possibly already the landscape definition, but incorrectly labeled (and we're missing the portrait definition).
cross browser fill
page.fill, but working in all browsers
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.
waitForDialog
waitForDialog should also be able to auto resolve the dialog.
await page.evaluate(() => setTimeout(() => prompt('foo'), 500));
await page.waitForDialog({ respond: 'bar' });
firefox protocol checking
It would be very nice to lint firefox against the juggle protocol. Requires a protocol.json exposed in juggler.
page.selectOption
We want to be able to select an option by id, or elementhandle, or something. Not just by value.
waitForPopup
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.
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.*
troubleshooting.md is missing
When the browser fails to launch, we point people to a non-existent troubleshooting.md, located at https://github.com/Microsoft/playwright/blob/master/docs/troubleshooting.md. This doubles their troubles!
See #581
Electron support
Hey, very cool that it supports WebKit and Firefox. Do you have plans to support Electron?
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
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)
waitForNodeIdle
Heuristic for not animating? This is ill-defined but necessary.
Question/Feature Request: Extension support
Could WebExtensions be supported across browsers, or will they be restricted to chrome ?
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!
waitForClickable
A node might be hidden/obscured. We should be able to wait for clicking it to actually click it.
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 ๐
$wait
elementHandleOrFrameOrPage.$wait(selector, predicate)
- waits until the element matched by the selector matches the predicate.
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.
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.
verbose logger
Let's bring back the debug:api stuff.
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?
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();
})();
fill() should check that element is focused before sending characters
Perhaps, focus() could also return whether the element was actually focused?
implement networkIdle{0,2} for all browsers using NetworkManager
Sort out shadow dom and iframes selectors
Right now our query engine can't query into the light dom when a root has a shadow dom. We also can't query into closed shadow DOM.
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.
GPU/WebGL/WebGPU support?
Curious if this is supported. It would seem so, but I didn't see if this had been asked previously.
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();
})();
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.
source (Desktop only)
https://gs.statcounter.com/browser-version-market-share/desktop/worldwide/#monthly-201812-201912
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.
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.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.