{"componentChunkName":"component---src-templates-post-js","path":"/blog/2020/01/24/playwright/","result":{"data":{"post":{"html":"

If you’ve ever used Puppeteer, you’d know it enables you to control a Chrome instance (or any other Chrome DevTools Protocol based browser) and execute common actions, much like in a real browser - programmatically, through a decent API. The same team has now build a new product called Playwright which apparently is their new favourite.

\n\n

What is Playwright? 🤔

\n

Playwright is a Node library which allows you to automate all major browsers - Chrome, Firefox, WebKit, and the new Microsoft Edge - plus the ability to execute actions, take screenshots, and much more, similar to Puppeteer.

\n

In their own words:

\n
\n

Playwright is focused on enabling cross-browser web automation platform that is ever-green, capable, reliable and fast. Our primary goal with Playwright is to improve automated UI testing by eliminating flakiness, improving the speed of execution and offering insights into the browser operation.

\n
\n

Imagine the possibility of running end to end tests on all major browsers before you ship your any product to your users.

\n

Is is replacing Puppeteer?

\n

Based on what I see and how they’ve answered, I’d say YES. But with a promise to contain all of the functionality of Puppeteer, and make it a cross platform, vendor-neutral, and a collaboration effort between all major parties.

\n

The lessons learnt are incorporated into it, APIs are testing-friendly, and it will be a cloud native product. For example all the user agent/device emulation is setup consistently on an object called BrowserContext to enable multi-page scenarios, click waits for the element to be available and visible by default, there is a way to wait for network and other events, etc.

\n

Getting started

\n

You can install Playwright via npm:

\n\n \n Copy\n \n \n
npm i playwright
\n

This will install Playwright and its dependencies. Note that it will also download the browser binaries which are quite bulky (~50MB to ~150MB).

\n

Launching a browser

\n

Playwright module provides a method to launch a browser instance. The following is a typical example of using Playwright to drive automation. Below snippet shows opening a Chrome instance and browsing example.com page.

\n {\r\n const browser = await playwright.launch();\r\n const context = await browser.newContext();\r\n const page = await context.newPage('http://example.com');\r\n // other actions...\r\n await browser.close();\r\n})();`, `32668873171439270000`)\"\n >\n \n Copy\n \n \n
const playwright = require('playwright').chromium;  // Or 'firefox' or 'webkit'.\r\n\r\n(async () => {\r\n  const browser = await playwright.launch();\r\n  const context = await browser.newContext();\r\n  const page = await context.newPage('http://example.com');\r\n  // other actions...\r\n  await browser.close();\r\n})();
\n

Taking a screenshot of the page

\n

You can execute most of the actions available on DevTools. For example we can take a screenshot of the page like so:

\n {\r\n const browser = await pw.webkit.launch(); // or 'chromium', 'firefox'\r\n const context = await browser.newContext();\r\n const page = await context.newPage();\r\n\r\n await page.goto('https://www.example.com/');\r\n await page.screenshot({ path: 'example.png' });\r\n\r\n await browser.close();\r\n})();`, `73524157505250570000`)\"\n >\n \n Copy\n \n \n
const pw = require('playwright');\r\n\r\n(async () => {\r\n  const browser = await pw.webkit.launch(); // or 'chromium', 'firefox'\r\n  const context = await browser.newContext();\r\n  const page = await context.newPage();\r\n\r\n  await page.goto('https://www.example.com/');\r\n  await page.screenshot({ path: 'example.png' });\r\n\r\n  await browser.close();\r\n})();
\n

Emulate a device

\n {\r\n const browser = await playwright.launch();\r\n const context = await browser.newContext({\r\n viewport: iPhone.viewport,\r\n userAgent: iPhone.userAgent\r\n });\r\n const page = await context.newPage('http://example.com');\r\n // other actions...\r\n await browser.close();\r\n})();`, `57243841750130820000`)\"\n >\n \n Copy\n \n \n
const playwright = require('playwright').firefox;  \r\nconst iPhone = playwright.devices['iPhone 11 Pro'];\r\n\r\n(async () => {\r\n  const browser = await playwright.launch();\r\n  const context = await browser.newContext({\r\n    viewport: iPhone.viewport,\r\n    userAgent: iPhone.userAgent\r\n  });\r\n  const page = await context.newPage('http://example.com');\r\n  // other actions...\r\n  await browser.close();\r\n})();
\n

Going beyond simple

\n

Playwright allows you to easily emulate geo-location data.

\n {\r\n const browser = await pw.chromium.launch();\r\n const context = await browser.newContext({\r\n viewport: pixel2.viewport,\r\n userAgent: pixel2.userAgent,\r\n geolocation: { longitude: 12.492507, latitude: 41.889938 },\r\n permissions: { 'https://www.google.com': ['geolocation'] }\r\n });\r\n\r\n const page = await context.newPage('https://maps.google.com');\r\n await page.click('text="Your location"');\r\n await page.waitForRequest(/.*pwa\\/net.js.*/);\r\n await page.screenshot({ path: 'colosseum-android.png' });\r\n await browser.close();\r\n})();`, `39270499825192665000`)\"\n >\n \n Copy\n \n \n
const pw = require('playwright');\r\nconst pixel2 = pw.devices['Pixel 2'];\r\n\r\n(async () => {\r\n  const browser = await pw.chromium.launch();\r\n  const context = await browser.newContext({\r\n    viewport: pixel2.viewport,\r\n    userAgent: pixel2.userAgent,\r\n    geolocation: { longitude: 12.492507, latitude: 41.889938 },\r\n    permissions: { 'https://www.google.com': ['geolocation'] }\r\n  });\r\n\r\n  const page = await context.newPage('https://maps.google.com');\r\n  await page.click('text=\"Your location\"');\r\n  await page.waitForRequest(/.*pwa\\/net.js.*/);\r\n  await page.screenshot({ path: 'colosseum-android.png' });\r\n  await browser.close();\r\n})();
\n

Note how we had to set the grant the necessary permission on the context, which means this is exactly what happens when a user browses the page.

\n

Accessing elements on page

\n

ElementHandle represents an in-page DOM element. ElementHandles can be created with the page.$ method, similar to what we’ve been using in DevTools.

\n {\r\n const browser = await playwright.launch();\r\n const context = await browser.newContext();\r\n const page = await context.newPage('https://example.com');\r\n const hrefElement = await page.\\$('a');\r\n await hrefElement.click();\r\n // ...\r\n})();`, `17794428558904052000`)\"\n >\n \n Copy\n \n \n
const playwright = require('playwright').chromium;  // Or 'firefox' or 'webkit'.\r\n\r\n(async () => {\r\n  const browser = await playwright.launch();\r\n  const context = await browser.newContext();\r\n  const page = await context.newPage('https://example.com');\r\n  const hrefElement = await page.$('a');\r\n  await hrefElement.click();\r\n  // ...\r\n})();
\n

Typing in text boxes

\n

You can emulate a user typing into text fields, for example performing a search action:

\n\n \n Copy\n \n \n
const elementHandle = await page.$('input');\r\nawait elementHandle.type('Hello'); // Types instantly\r\nawait elementHandle.type('World', {delay: 100}); // Types slower, like a user\r\nawait elementHandle.press('Enter');
\n

What else?

\n

You can even play with mouse (pun intended):

\n\n \n Copy\n \n \n
// Using ‘page.mouse’ to trace a 100x100 square.\r\nawait page.mouse.move(0, 0);\r\nawait page.mouse.down();\r\nawait page.mouse.move(0, 100);\r\nawait page.mouse.move(100, 100);\r\nawait page.mouse.move(100, 0);\r\nawait page.mouse.move(0, 0);\r\nawait page.mouse.up();
\n

What next?

\n

The list of the available actions and what is available on the API documentation page. The list is almost overwhelming, in a good way 😁.

\n

What browsers are supported?

\n
    \n
  • Chromium: Playwright uses upstream versions of Chromium.
    • \n
  • WebKit: Playwright makes a number of modifications to WebCore and WebKit2 in order to extend WebKit’s remote debugging capabilities and support the full set of Playwright APIs.
    • \n
  • Firefox: Playwright makes a number of modifications to Firefox as well. Those are adding support for content script debugging, workers, CSP, emulation, network interception, etc. etc.
    • \n
  • MS Edge: Since it’s based on Chromium, it’s supported as well.
    • \n
\n

What is the update cadence?

\n

The team follow semver, and the team are trying to keep in sync with Chromium update cycle, possibly once a month.

\n

But

\n

Playwright is in a stage where there might be breaking changes coming up as it progresses through full support for those browsers. You can find more information around this on their Is Playwright Ready? page.

\n

So go have fun and enjoy this awesome emerging web technology 👍🏼. I will be exploring this on a couple of my side projects too, so stay tuned for more posts.

","timeToRead":4,"frontmatter":{"unformattedDate":"2020-01-24T00:00:00.000Z","date":"January 24, 2020","title":"If you consider Puppeteer cool, then Playwright is awesomeness 😍","subtitle":null,"id":null,"author":"Yaser Adel Mehraban","gravatar":null,"canonical_url":null,"tags":["webdev","showdev","testing","playwright"],"thumbnail":null,"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAACAUlEQVR42h3QW2/aMBgG4PzmSfsTu57Um932Ytq0TVu7VWsp0BaSgAMUaA4kOElzIAfbScjJTgudmfTolaVP7yfrE5Yu0aJKi0ojrm3cPpPW4zLqktbhMA0LFu5pmNMgp3HBeDqoDvgoKQQlLEzyYuJuGeRPuz1ELUyrzS6HqDZ2hZXw997FrZ/xjTVEJUzKsDyg5uiTRhj7+SKlakrv1vD8onc1frwYSJ8vbq5G88vh9Nufwffru2tx8VdeDvuTh5+3o6etX7xE1cFFtSD6OUhaJW41zETVuZms+jO1P11LqiOrdl9R7x/NwUy/nRtLbRtZ0G/fYMY25EWLeDnIlbgBbg5gtgqbDeqc/NUrD0F1iJtj3L555dGrjjzt/cEsXm3CTNLpuFvvSkHcpgrMpiYBdg6cYuoUM2e/8spN0lqIWohtUqojqhOmY6YjppNukzGDdKtdJYh6PLezxRYDu5AsPDaSkR5P7GLqlhxwK/BcgaAGCVVQN0Od7DERUhXzcilI22wy4gf5MYOkN7d/S9ovUR1ZSPEqwPn/86QEQbPA9Pxr9+796/0zU6K9wL962RPPPp7JVnriZLJDJIgVr1b86sSrlKBWwhp49WPafBl0Hz51csAkJxMe1v7YSIdaIllI5LZI5GUzkfSdZESSxjMWIRZtcmKhiYNAgGVI7rXoH3l0ClcMCAIEAAAAAElFTkSuQmCC"},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/8054ac3f5d98f5cf4bf6b36d2f58a14f/a2195/socialpreview.png","srcSet":"/static/8054ac3f5d98f5cf4bf6b36d2f58a14f/cadb4/socialpreview.png 750w,\n/static/8054ac3f5d98f5cf4bf6b36d2f58a14f/a2195/socialpreview.png 800w","sizes":"(min-width: 800px) 800px, 100vw"},"sources":[{"srcSet":"/static/8054ac3f5d98f5cf4bf6b36d2f58a14f/11ba1/socialpreview.webp 750w,\n/static/8054ac3f5d98f5cf4bf6b36d2f58a14f/5f042/socialpreview.webp 800w","type":"image/webp","sizes":"(min-width: 800px) 800px, 100vw"}]},"width":800,"height":400}}},"img":null,"socialPreview":{"publicURL":"/static/8054ac3f5d98f5cf4bf6b36d2f58a14f/socialpreview.png"}}}},"pageContext":{"title":"If you consider Puppeteer cool, then Playwright is awesomeness 😍","postPath":"/blog/2020/01/24/playwright","nextPost":"/blog/2020/02/09/marquee","previousPost":"/blog/2020/01/09/clipboard-api"}},"staticQueryHashes":[],"slicesMap":{}}