Forem: Arjun Attam

Fast and reliable cross-browser testing with Playwright 🎭

Arjun Attam — Wed, 06 May 2020 20:35:22 +0000

Web developers today are shipping faster. Web apps are becoming increasingly sophisticated and run across all devices—our phones, tablets and desktops—each running a different browser engine. This increase in velocity and targets puts immense pressure on the testing process: automated cross-browser testing has become more important than ever.

Automated end-to-end tests can be incredibly powerful: by replicating user interactions, they can verify functionality, usability and performance—at least in theory. In practice, end-to-end tests can be slow, flaky and hard to maintain.

Today we are announcing Playwright – our take on fixing end-to-end testing. Playwright is a cross-browser automation library to write tests that are fast, reliable and capable.

Playwright can test web apps across multiple browsers: Chromium-based browsers like Google Chrome and the new Microsoft Edge, WebKit-based Apple Safari and the Gecko-based Mozilla Firefox. Playwright 1.0 is available today on NPM.

With a single API, Playwright can automate a wide-range of scenarios across different browsers, with a foundation that emphasizes reliable and fast execution.

Increased reliability with timeout-free automation

Modern web apps need to be rich and interactive, and dynamically respond to user actions. This asynchronous behavior makes modern apps harder to predictably automate. A network request can take slightly longer than usual and keep the loader spinning.

Playwright automatically waits for the UI to be ready, which helps create tests that are reliable to execute and simpler to author. For example, a page click will auto-wait for the target element to be visible and ready. Developers and testers can write tests that focus on the scenario, and not on timing or UI state. This significantly improves the maintainability of test code over time.

Under the hood, Playwright uses an event-driven architecture that can listen to browser events. Playwright tests can accurately wait for DOM changes, network requests or even new console logs. Playwright uses the same protocols that power browser developer tools — tools that developers have grown to love.

With precise browser events, automation scripts can avoid timeouts. In traditional end-to-end testing, waiting for the app to be ready was often the only way to manage asynchronous behavior. However, timeouts are a slippery slope: they always lead to inconsistent failures or "flaky tests".

Automation that scales: fast, parallelized execution

Playwright is built to deliver fast, parallelized automation in local and cloud environments. A single instance of Chromium, Firefox or WebKit can create multiple isolated and concurrent browser contexts. This significantly improves performance and enables independent multi-page emulation scenarios.

A single browser context can host multiple web pages and define context-level behavior, such as network interception or authentication credentials. Browser contexts can also emulate mobile viewports, mock geolocation and locale. This enables a single WebKit instance to run multi-page scenarios across multiple device configurations in parallel: desktop, iPhone and iPad.

Automating the web of today and tomorrow

The web platform is more capable than ever before and is continuously evolving. Playwright is built to keep up with growing capabilities of web browsers and web apps. This also includes newer browser features that are used by Progressive Web Apps (PWAs). Playwright can automate a wide-range of capabilities across Chromium, Firefox and WebKit, with a single API.

Emulation of mobile viewports, permissions, geolocation and locale
Support for web components via shadow-piercing selectors
Network interception for modifying and mocking network activity
File uploads and downloads
Scenarios that span multiple frames, tabs and pop-ups
Trusted native input events from mice and keyboards
Web workers and out-of-process iframes

Get started with Playwright: on local and CI

Playwright 1.0 is available on NPM and is ready to use today. The getting started guide is a good place to start. Playwright is built to be modular, and can be used with all popular test runners.

To complement the Playwright NPM package, we are also releasing a GitHub Action to run Playwright tests in your CI/CD pipelines with GitHub Actions.

Thank you!

Playwright is developed in the open on GitHub. We are grateful to our early adopters, who have shared painstaking details into their use-cases and have helped shape the Playwright API.

Playwright is also standing on the shoulders of giants. It would not have happened if not for the efforts of these exceptional teams working on browser engines and automation solutions. We are grateful to:

The Chromium, Chrome DevTools and Puppeteer teams for working with us upstream
The WebKit and Web Inspector teams at Apple, Sony, Igalia and elsewhere for accepting our WebKit patches and making WebKit run on Windows and as headless on Linux
The Firefox team for their efforts in supporting newer automation drivers
The WebDriver team for pioneering automated end-to-end testing and bringing it to scale

—on behalf of the Playwright team

Chat with your team while you collaborate over code in VS Code

Arjun Attam — Wed, 30 Oct 2019 17:07:19 +0000

I have been building Live Share Chat over the last year or so, and I recently added support for direct messages: you can now DM your VS Live Share contacts, within or outside a collaboration session.

Fun fact: Live Share Chat started as an experiment to reduce my constant context-switching between VS Code and Slack. I wanted to see what it would be like to be able to chat about code with my Slack teammates.

At first, it seemed weird to add chat to my text editor, but over time, I noticed how developers using VS Live Share started using the extension. It made sense to rename the extension to Live Share Chat, and emphasize the integration (I wrote about this journey here). The usage on Live Share has grown consistently over time, and that has motivated to keep working on it.

What do you think about this experience? Have you had a chance to try it out?

Virtual collaboration workspaces for teams, classrooms, and communities

Arjun Attam — Wed, 25 Sep 2019 17:22:30 +0000

The code that we write is the work of many other developers around us: it is shaped and influenced by the teammates who review it, the open source libraries we use, and Stack Overflow answers that we refer to. Code is not written in isolation—it is the result of our interactions with other developers around us.

GitHub, Stack Overflow and Slack (to pick a few) do an excellent job at connecting us to other developers. But they are disconnected from the process of writing code in an editor, which is where assistance is most needed. We wanted to reduce barriers in seeking and providing assistance, and enable collaboration without having to jump across multiple apps, or wade through distracting notifications. We wanted to build virtual workspaces for teams, classrooms and communities to collaborate.

To prototype these ideas, we built Live Share Spaces, an extension for VS Code. Today, we’re excited to share it with you.

Get started with Live Share Spaces

Live Share Spaces can be installed through the extensions marketplace. Once you have the extension, you can discover and create spaces. A space is basically just a name that can represent anything: a team (project-xyz), a language ecosystem (elixir), or an event (advent-of-code-2019).

Rich ways to connect, within the editor

Live Share Spaces is built on VS Live Share, which enables rich real-time experiences for developers to collaborate. Developers in a Live Share session can co-edit, debug, and jump into shared servers and terminal sessions. Live Share Spaces builds on the features of VS Live Share: members in a space can share their presence status to show that they are available or busy. They can also invite members into Live Share sessions.

Live Share Spaces also adds more ways for members to collaborate. Each space has a chat channel, where members can message each other. Each space also has a readme, through which new members can get to know the space, and find useful links to get started.

Seek and provide assistance

Live Share Spaces aims to make it super easy for members to express their intent to seek assistance. Members can create help requests to notify other members of their intent. Other members can join the request to provide assistance, which would put them in a Live Share session hosted by the first user.

In addition to help requests, members can also create Live Share sessions for real-time code reviews. Reviewing code on Live Share is much faster than creating a pull request and then waiting for comments. Members can also create sessions for broadcasts, to live stream their work for team brown bags and community meetups. In all these sessions, users can use existing Live Share features, like audio calls and comments.

Invite members and manage spaces

To invite new members to join your space, you can create and share deep-links to the space. These links can also be shared as a badge on your repo’s readme.

The first member in a space is called a founder. Founders are like admins that curate the experience for other members: for example, they can make a space private, block/unblock a member, and edit the space readme. A founder can also promote other members to founders, to share the responsibilities of managing the space.

Tell us what you think!

We are excited to release this experiment in the wild, and eager to hear from you on whether this looks interesting. Create a space for your team/community or let us know of issues that block you from doing so.

You can find us and the code base on GitHub. You can also connect with us in the vsls space. Use the vsls.space deep-link to join the space in VS Code (or vsls.space?insiders, if you prefer Insiders). Look forward to seeing you there!