Skip to main content

Quality Assurance

Playwright – End to End testing for Web apps

Featuredimage

Have you ever wondered; How to simplify End-to-End testing???

Well, I guess that’s where PLAYWRIGHT comes into picture. It’s an open-source NodeJS framework by Microsoft for end-to-end automation for Web applications. Also, it helps developers to test web apps across all Browsers and modern Operating system.

Optimizely AUI is an B2B marketplace website which hits Perficient for migrating from classic site to spire site. Insite commerce requires both developer and tester skills to work with.

Install Playwright and Tools to evolve:

With these Software you could play with Playwright. For effortless installation go for installation commands from Command Prompt. Update System and Environment variables as well.

Install NodeJS, NPM, Playwright, Chocolatey, Docker-desktop, Visual Studio 2019 professional and Dotnet.

Installation Playwright

Why Playwright:

  • Easy to setup using simple commands
  • Playwright address issues and makes test authoring more readable, fast and reliable.
  • It’s Auto-wait enables elements to be visible before interacting.
  • Supports cross-browsers, cross-platform, cross-language and Mobile emulation.
  • Default headless browser execution improves the test execution speed.

Run a Test:

  • Right click on the solution explorer and build the solution to avoid failures.

Build Solution

  • Navigate to Test -> Test Explorer

Test Explorer

  • To run the particular Testcase click on run option and to run all the test cases, choose run all next to run option.

Our Project Experience:

As a part of the project, Perficient supported to migrate from insite-commerce Classic StoreFront to Spire Storefront. With the help of classic test case number, can easily search for the Spire Storefront test scripts if it is present already. First, navigate to Spire Storefront test case manually by entering the classic storefront testcase number. However, some of the test cases are already present in Classic storefront, we searched for the test case with reference to testcase number. If the test case is available in classic, we kept it as a reference to recreate spire storefront automation script.

Challenges & Resolution:

  1. To locate the elements only data-test-selector can be used. Faced challenges in adding the data-test-selector in the exact tag.
    • Visual studio code is user friendly than Visual Studio, also we can easily add data-test-selector.
    • Also, we can easily find the place the previous data-test-selector is added by searching with the text that present in the DOM.

Add Data Test Selector

  1. The project contained two different sites (i.e., classic and spire site) it didn’t support us to open/run both the sites at a time.
    • Every time need to switch from classic (http://localhost:3010) to spire (http://localhost:3000) by giving (/Admin/SwitchCms).
    • To work on specific test case, first we need to enable required settings from backend logging in as a Admin. (localhost:3000/admin)
  1. Docker might not work properly due to spacing consumption.
    • It requires resetting database every time to run the docker.
    • Before running the script, we used to reset the docker in docker desktop by choosing ‘Reset to factory restore’ and will run the cmd docker-up which will fetch all the scripts in containers/apps in docker.

Docker

  1. The created/generated product/page is not displayed in the spire site.
    • While adding a product/a page/a list supposed to use database generator which helps to displays the product /page/list.
    • While working with insite generator, must setup the generator and start working on the script else product/page will not be displayed.

Best Practices:

    • Create new branch and updated your changes.
    • Always fetch the latest code from dev and start on the script.
    • Focus on reusability, reuse existing methods.
    • Clean and build the project to make the script execution smooth.

Value-add for Client:

    • Better Quality deliverables
    • Increased delivery speed
    • Better service levels
    • Less Maintenance & Support
    • Highly flexible to its audience

Thoughts on “Playwright – End to End testing for Web apps”

  1. Raja Ganesh Rajasekaran

    Excellent and Detailed writeup . Certainly Playwright is a boon in delivering a high quality work.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Hemalatha Ekambaram

Hemalatha Ekambaram is a technical consultant with over 5 years of experience. She works on automation testing for the web, APP & API. She has worked with Playwright, Appium SoapUI, and Cypress.

More from this Author

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram