...

Playwright Test was created specifically to accommodate the needs of the end-to-end testing. It does everything you would expect from the regular test runner, and more. Playwright test allows to: Run tests across all browsers. Execute tests in parallel. Enjoy context isolation out of the box. Capture videos, screenshots and other artifacts on failure. Integrate your POMs as extensible fixtures.

Playwright can be installed and configured as follows:

Open terminal or command prompt and go to your project directory. And run

npm init playwright

This will ask for some configurations as

Getting started with writing end-to-end tests with Playwright: Initializing project in '.'
1. Do you want to use TypeScript or JavaScript? …
❯ TypeScript
JavaScript
[Select your option and press ENTER key]

2. Where to put your end-to-end tests? › tests
[Give name and press ENTER key]

3. Add a GitHub Actions workflow? (Y/n) › true
[Press n or y key, if you want to add Gibhub workflow to it]


It will show initializing project
Initializing NPM project (npm init -y)…


This will create following files/dir:
node_modules
package.json
tests
package-lock.json
playwright.config.ts

and optionally add examples, and a first test example.spec.ts under tests . You can now jump directly to writing code into it.


You can run folllowing command to run your tests

npx playwright test
or
npx playwright test --headed as in headful mode.

  • Run tests across all browsers.
  • Execute tests in parallel.
  • Enjoy context isolation out of the box.
  • Capture videos, screenshots and other artifacts on failure.
  • Integrate your POMs as extensible fixtures.

Limitations

...
WebdriverIO is a progressive automation framework built to automate modern web and mobile applications. It simplifies the interaction with your app and provides a set of plugins that help you create a scalable, robust and stable test suite.

WebdriverIO can be installed configured as follows:

Open terminal or command prompt and go to your project directory. And run

npm init wdio .

This will create package.json (if not present). And then it will run WDIO CLI Wizard and will show WDIO Configuration Helper.

It will show as follows:
=========================
WDIO Configuration Helper
=========================
1. Where is your automation backend located? (Use arrow keys)
❯ On my local machine
In the cloud using Experitest
In the cloud using Sauce Labs
In the cloud using Browserstack or Testingbot or LambdaTest
or a different service
I have my own Selenium cloud
[Press ENTER key]

Now, it will ask to select framework as
2. Which framework do you want to use? (Use arrow keys)
❯ mocha
jasmine
cucumber
Use Up and Down arrow keys to select the desired framework
[Select cucumber and Press ENTER ]

Now, it will ask to select a compiler as
3. Do you want to use a compiler? (Use arrow keys)
Babel (https://babeljs.io/)
TypeScript (https://www.typescriptlang.org/)
❯ No!
[Press ENTER key]

Now, it will ask for feature file location as
4. Where are your feature files located? (./features/**/*.feature)
[Press ENTER key OR you can specify location for feature file]

Now, it will ask for step-definition file location as
5. Where are your step definitions located? (./features/step-definitions/steps.js)
[Press ENTER key OR you can specify location for feature file]

Now, it will ask to generate some test files as
6. Do you want WebdriverIO to autogenerate some test files? (Y/n)
[Press n and then ENTER key]

Now, it will ask to confiture the reporter as
7. Which reporter do you want to use? (Press space to select, a to toggle all, i to invert selection)
❯◉ spec
◯ dot
◯ junit
◯ allure
◯ sumologic
◯ concise
◯ reportportal
[Press ENTER key]

Now, it will ask to install a plugin as
8. Do you want to add a plugin to your test setup? (Press space to select, a to toggle all, i to invert selection)
❯◯ wait-for
◯ angular-component-harnesses
[Press ENTER key]

Now, it will ask to add a service to the setup as
9. Do you want to add a service to your test setup? (Press space to select, a to toggle all, i to invert selection)
❯◉ chromedriver
◯ sauce
◯ testingbot
◯ selenium-standalone
◯ devtools
◯ browserstack
◯ appium
[Press ENTER key]

Finally, it will ask to add url as
10. What is the base url? (http://localhost)
[Enter the url and Press ENTER key]
Now it will add all dependencies to the setup


  • Easy to Set up: WebdriverIO follows a simple setup process. Just install node packages using npm and start testing
  • Customization: WebdriverIO is highly extendable so users can customize the framework as they need
  • Cross Browser Testing: WebdriverIO supports multiple browsers such as Chrome, Edge, Firefox, Internet Explorer, and Safari.
  • Native Mobile Application Testing: WebdriverIO framework can be extended to test native mobile applications. Cross-Origin Support: WebdriverIO doesn’t restrict origins. Origin doesn’t matter much as testers can automate them unconditionally.
  • Multiple Tab/Window Support: WebdriverIO Supports switching to and from multiple windows and tabs.
  • iFrame Support: WebdriverIO doesn’t restrict in terms of iFrame. Testers can automate iframe-based scenarios using simple web driver commands.
  • Reporters: WebdriverIO supports more than dozens of reporters.
  • Testing Framework/Assertions: WebdriverIO supports Mocha, Jasmine, and Cucumber test frameworks.
  • Parallel Testing: Testers can configure WebdriverIO to launch multiple instances and execute tests parallelly.
  • Screenshots: WebdriverIO can be configured to take screenshots of tests.
  • Video: Though WebdriverIO doesn’t support video recording out of the box it can be configured to do so.
  • Pipeline Integration: WebdriverIO tests can be integrated into CI Systems like Jenkins, Azure, etc.
  • Selectors: It supports various types of selectors including CSS and Xpath.
  • Page Object Pattern: WebdriverIO Framework can be easily configured to Page Object Model.
  • File Upload and Download: WebdriverIO supports File Upload and Download features.

Limitations
  • Selenium Limitation Still Exists: WebdriverIO is a custom implementation of Selenium. So, any challenges testers face with Selenium apply to WebdriverIO.
  • Confusing Syntax: Though WebdriverIO is a Javascript-based framework, the syntax can be confusing for beginners.
  • Network Interception: Network control / Network interception is challenging in Webdriver.
  • Typescript Integration: WebdriverIO supports Typescript, but the setup is usually time-consuming.
  • Documentation: Some parts of WebdriverIO documentation can seem obtuse and confusing for beginners.

...
Handling the Appium server is out of scope of the actual WebdriverIO project. This service helps you to run the Appium server seamlessly when running tests with the WDIO testrunner. It starts the Appium Server in a child process.

WebdriverIO can be installed configured same as for webdriver installation (as mentioned above), only need to change the appium installation as follows

Open terminal or command prompt and go to your project directory. And run

npm init wdio .

Now, it will ask to add a service to the setup as
9. Do you want to add a service to your test setup? (Press space to select, a to toggle all, i to invert selection)
❯◉ chromedriver
◯ sauce
◯ testingbot
◯ selenium-standalone
◯ devtools
◯ browserstack
◯ appium
Select appium and [Press ENTER key]


Now it will add all dependencies to the setup


...
Cypress consists of a free, open source, locally installed Test Runner and a Dashboard Service for recording your tests. First: Cypress helps you set up and start writing tests every day while you build your application locally. TDD at its best! Later: After building up a suite of tests and integrating Cypress with your CI Provider, our Dashboard Service can record your test runs. You'll never have to wonder: Why did this fail?

Cypress can be installed configured as follows:

Open terminal or command prompt and go to your project directory. And run

npm install cypress

This will do setup of Cypress for you.

This will create following files/dir:

cypress
node_modules
cypress.json
package-lock.json

There are two ways, you can run cypress.
First by opening it into the browser and then can run specific test or suite. This will load default installed spec files.

Run npx cypress open, this will open it.

Second, you can configure script into package.json and then can run it using npm, you can run all specs or specific spec using
npx cypress run --spec 'cypress/integration/firstTest.spec.js'

  • Easy to Set Up: Cypress is easy to set up. Simply install Cypress node packages and start testing.
  • Debugging: Cypress provides various ways to debug and analyze the test scripts. Cypress provides debuggability features like readable stack trace, console logs, pause test, and browser developer tools control.
  • Multi-Level Testing: Cypress is not limited to browser-based end-to-end testing flows. It also supports unit testing, integration testing, and API testing.
  • Screenshots: Cypress provides the option to take screenshots of tests as a configurable option. The screenshot option is available for both headful and headless mode.
  • Video recording: Testers can record the test on video and replay it to see how their tests are executed.
  • Auto Wait: Cypress automatically waits for elements to load before executing commands and assertions. Testers usually do not need to specify additional waits.
  • Spies, Stubs, and Clocks: Cypress provides the feature to verify, analyze and control server responses, timers, and functions.
  • Network Control: With Cypress, testers can stub network traffic as needed which helps to test edge case scenarios.
  • Stable Results: Unlike other frameworks, Cypress executes commands directly within the browser window, which provides more control and leads to more consistent test results.
  • Faster Execution: Cypress executes commands directly within the browser so it’s faster compared to the Selenium-based framework. However, this depends on application performance as well.
  • Interactive Window: In headed mode, Cypress executes tests in the interactive window and captures screenshots after the execution of each command. So after execution, testers can navigate to executed commands and check what has happened in every test.
  • Cross-browser support: Cypress Supports Chromium-based browsers like Edge, Chrome, Electron, and Firefox.
  • Community Support: Cypress is bolstered by robust community support.
  • Learning and Documentation: Cypress provides good documentation so anyone aware of JavaScript can learn and implement the framework.
  • Cypress Dashboard: Cypress offers a commercial solution that offers an in-depth analysis of tests in a single dashboard.

  • Cross-Origin Restriction: Cypress doesn’t allow multiple origin website navigations within a single test.
  • Multi-Tab/Window Restriction: Cypress doesn’t support testing multiple tabs or windows. That means testers cannot switch to and from one window to another.
  • iFrame Support: Automating iFrame based scenarios using Cypress is challenging.
  • Locators: While Cypress supports CSS selectors, it doesn’t come with Xpath locator support. Testers need to rely on an additional plugin to use Xpath.
  • Assertion Libraries: Cypress comes with only Mocha, Chai assertion libraries.
  • Auto waiting: Though Cypress claims it automatically waits for elements, there are cases where it doesn’t work.
  • Async/await: If you use async/await for your Cypress test it might behave unexpectedly.
  • Browser Support: Currently Cypress supports only Chromium Family and Firefox. So testers cannot use Cypress to test other browsers like Safari.
  • Single Sessions: Testers can’t use multiple sessions or open multiple instances in Cypress.
  • CI/CD integration: If testers are using third-party hosted agents for Cypress pipeline execution, the installation of Cypress itself will take a considerable amount of time.
  • Page Object Pattern: Page Object Pattern is not encouraged by Cypress even though it is still achievable with some customization.
  • File upload and download: File upload and download is a pain in Cypress. Testers often need to rely on third-party packages to make it easy.
More information (similarities and differences) can be found here:
https://www.browserstack.com/guide/cypress-vs-webdriverio

...
After an extensive alpha and beta period to get everything right, Selenium 4 has now been officially released! In the new release, there have been changes made to the highly anticipated feature, Relative Locators, where the returned elements are now sorted by proximity to make the results more deterministic.

Selenium 4 (Alpha 3) version is now launched in the market. As we all know the founder of Selenium is “Simon Stewart” and now he has introduced the new version not only for web drivers but also for Grid and IDE.

Selenium 4 adopted the W3C standard Web Driver Protocol. All the browsers like Google Chrome, Safari, Internet Explorer, Edge, and many more also follow the W3C standard due to which interaction between browser driver and Selenium Web Driver will now be based on W3C standard web driver protocol.

...

For more new features, please follow Selenium 4

Copyright © 2022 Core Concepts Pte Ltd - All rights reserved.