DEV Community: Vibhanshu Jain

Eye-catching features of the Playwright

Vibhanshu Jain — Sat, 19 Aug 2023 05:24:14 +0000

I was amazed by trending Automation tool Playwright and wanted to share some eye-catching features of the Playwright:

API support on the fly

No need to depend on third-party library to automate API
API can be added along with UI test cases

In the below snip, I am using API response after the click event on the UI effortlessly:

In-built support of the detailed reports

Inbuilt descriptive support
Support of the test screenshots, videos, and logs on the go
Easy to debug at any point of the test case via timelines or the test steps
Point out the flaky test cases which help us to catch intermittent failures
Network logs recorded for each test step
Pick locator, Selectors for the web page directly from the report

Below is the snip of the in-built report

Assert based on Visual Comparisons

Playwright allows you to assert a test case totally based on the screenshot pixels
Validate test cases based on the screenshot of the page as well as the single component e.g toggle button
Helps in catching user experience issues

Here test case got failed due to image comparison

Easy to handle Download streams
Easy to perform operations on the downloaded files
here is a good read(https://playwright.dev/docs/api/class-download)

Auto-wait mechanism

No need to break your head why it is not clicked and not filled, it handles wait automatically for each action
It will run all the possible wait scenarios before performing an action Here is an example of the click action done by the playwright:

Do let me know the feature which amazed you and wanted to explore the Playwright more

Playwright Awesome Selectors

Vibhanshu Jain — Sat, 19 Nov 2022 07:48:52 +0000

Check out my short post on Playwright Awesome Selectors

My personal favourite is page.getByRole(role, options)
eg:

await page.getByRole('button', { name: 'Sign in' }).click();

Do tell me yours...😀

Playwright ?

Vibhanshu Jain — Fri, 28 Oct 2022 15:26:35 +0000

I want to share about the trending tool Playwright, which I came across recently.

Playwright ?

Playwright is an End-to-End Testing framework, which comes with a lot of inbuilt features that you will require in any automation tool. Playwright tests anything that runs in a web browser. All of the architecture surroundings, It is built to handle modern JavaScript frameworks like React, Angular, Vue, Elm, etc.
In a nutshell, Playwright is a trending next generation front end testing tool built for the modern web

Playwright is all in one

When we say all in one, we don't need any other 3rd party tool to achieve our automation tasks/framework.
Unlike other tools, where we have to maintain and integrate multiple libraries to support automation framework, increasing the effort and cost required to maintain those libraries.
With Playwright, we don’t have to worry about any of these things, since most of the things which are required come along with Playwright itself.

Features of Playwright

There is multiple uniqueness, which makes Playwright one of the choices for Web automation. A few of them are:

Any browser • Any platform • One API

Cross-browser.
Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox.
Cross-platform.
Test on Windows, Linux, and macOS, locally or on CI, headless or headed.
Cross-language.
Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java.
Test Mobile Web.
Native mobile emulation of Google Chrome for Android and Mobile Safari. The same rendering engine works on your Desktop and in the Cloud.

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 - the 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 modern browsers architecture 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, 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 the 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.

I have not covered coding and architecture as it will confuse the new readers.
Thanks for the read let me know what things you are interested in about this tool and what you want to know more.

Official Playwright link: https://playwright.dev/docs/intro

Cypress?

Vibhanshu Jain — Mon, 06 Dec 2021 06:51:46 +0000

I want share about the trending tool Cypress, which I came across recently.

Cypress?

Cypress is an End-to-End Testing framework, which comes with a lot of inbuilt features that you will require in any automation tool.Cypress tests anything that runs in a web browser. All of the architecture surrounding, It is built to handle modern JavaScript frameworks like React, Angular, Vue, Elm, etc.
In a nutshell Cypress is a next generation front end testing tool built for the modern web

Cypress is all in one

When we say all in one means we don't need any other 3rd party tool to achieve our automation framework.
Unlike other tools, where we have to maintain and integrate multiple libraries to support automation framework, increasing the effort and cost required to maintain those libraries.
With Cypress, we don’t have to worry about any of these things, since most of the things which are required come along with Cypress itself.

Features of Cypress

There is multiple uniqueness, which makes Cypress one of the choices for Web automation. Few of them are:
Fast - Run on the fly.
Flake Resistant - Cypress automatically waits for commands and assertions before moving on. No more async issues.
Ability to test API’s cases by mocking the server response. (Network Requests)
Debuggability -We can hover over each command in the Command Log to accurately see what happened at each step.
View videos of the execution of your entire tests when running from the Cypress Dashboard.
Viewport Sizing - set your app viewport size to test responsive layouts.

I have not covered the coding part and architecture as it will be confusing to the new readers.
Thanks for the read let me know what are the things you are interested about this tool and what you want to know more.

Official cypress link: https://www.cypress.io/