Featured resource
pluralsight tech forecast
2025 Tech Forecast

Which technologies will dominate in 2025? And what skills do you need to keep up?

Check it out
Hamburger Icon
  • Labs icon Lab
  • Core Tech
Labs

Guided: Playwright Foundations with Node.js

Unlock the full potential of end-to-end testing with Playwright and Node.js in this comprehensive, Guided Code Lab. You'll learn to perform critical tests on an e-commerce website, covering user registration, login, and shopping cart functionalities. By the end of this lab, you'll have hands-on experience with Playwright's powerful features and be well-equipped to ensure your web applications run flawlessly.

Labs

Path Info

Level
Clock icon Beginner
Duration
Clock icon 1h 25m
Published
Clock icon Sep 11, 2024

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Table of Contents

  1. Challenge

    Introduction

    Welcome to the Guided: Playwright Foundations with Node.js Code Lab!

    Playwright is a framework that enables reliable end-to-end testing and automation for modern web applications.

    info> The prerequisites for this lab include familiarity with JavaScript and HTML.

    Playwright Test was created specifically to accommodate the needs of end-to-end testing, and it supports all modern rendering engines including Chromium, WebKit, Firefox, and mobile browser engines.

    In this Code Lab, you will become a QA engineer tasked with verifying the functionality of a prototype e-commerce site for ABC Mobile Carrier. Starting from the ground up, you'll:

    • Write and run tests for user registration, including validation checks.

    • Implement tests for user login/registration.

    • Perform actions such as filling out forms, clicking buttons, and verifying success messages.

    • Ensure that your tests cover all necessary validation and business logic.

    Completing these tasks will give you practical experience with Playwright's robust testing framework and learn to write reliable, maintainable end-to-end tests.

    The files for the ABC Mobile Carrier website can be found under the src/public folder.

    You will write the code for this project under the src/apptests folder, where you will find the following files:

      index.spec.js The `src/apptests/index.spec.js` file is where you will write the code for testing the functionality of `src/public/index.html`.
      Test command: npx playwright test src/apptests/index.spec.js
      login.spec.js The ```src/apptests/login.spec.js``` file is where you will write the code for testing the functionality of the ```src/public/login.html``` and ```src/public/login.js``` files.
      Test command: npx playwright test src/apptests/login.spec.js
      register.spec.js The ```src/apptests/register.spec.js``` file is where you will write the code for testing the functionality of the ```src/public/register.html``` and ```src/public/register.js``` files.
      Test command: npx playwright test src/apptests/register.spec.js

    The catalog.spec.js files includes the finished testing code for catalog.html, as an example.

    Before anything, please familiarize yourself with the ABC Mobile Carrier website, which is accessible by running the node src/index.js command from the Terminal, and refreshing the Web Browser tab, You may click on the Open in new browser tab button on the Web Browser address bar, to view the site in your browser.

    Play with the ABC Mobile Carrier website and see how it works.

    info>The solution for each step in this lab are available for your reference in the solution directory.

    Each step might have one or more tasks. For example, the solution for Step 2 - Task 1 can be found in the solution/step02/task01.spec.js file.

    Within the solution/final folder, you will find all of the finished project files.

    You may also test the finished code using the npx playwright test command, which will run all of the tests. If you want to run a specific project, you can specify it at the end of the command. For example:

    npx playwright test solution/final/index.spec.js

  2. Challenge

    Creating Index Testing

    In this step, you will create the foundation for the Playwright tests and automations for validating the logic of the src/public/index.html file, which is a fundamental part of creating the Playwright tests for the whole solution.

    You will write the Playwright tests and automations for testing in the index.spec.js file located in the src/apptests directory.

    First, you will need to import the required Playwright functions and describe the test suite for the ABC Mobile Carrier Homepage to ensure that you will be indeed testing the src/public/index.html file. To test the functionality of src/public/index.html, it is essential for Playwright to navigate to the location of the page, by accessing the http://localhost:3000/index.html URL.

    Once you have accessed the URL using Playwright, you can verify that the index.html page has the expected title: 'ABC Mobile Carrier'.

    The src/public/index.html file also contains an h1 tag, which includes the 'Welcome to ABC Mobile Carrier' text. You'll also have to check that this text is included. Next, you need to check if the Register button is present and has correct attributes. When you click on the Register button, you should be redirected to register.html. You will also need to check if the Login button is present and has correct attributes. By clicking on the Login button, you should be redirected to login.html.

  3. Challenge

    Expanding Index Testing

    Continuing with the testing of the src/public/index.html file, you must check if by clicking the Register and Login buttons, the index.html page redirects to register.html and login.html , respectively.

    This is crucially important because it checks whether if the URLs match those respective register.html and login.html pages.

    Therefore, throughout this step, you will continue to expand the src/apptests/index.spec.js file and add additional logic to it. After checking that the URLs match register.html and login.html, you must now create a test to verify if the Bootstrap and custom stylesheets are linked correctly.

  4. Challenge

    Creating Login Testing

    Now that you have written all the logic required for testing src/public/index.html, it is now time to put some of this gained knowledge for creating the tests for the Login functionality. You'll write these tests in login.spec.js located in the src/apptests directory.

    First, navigate to login.html and check for the page title. Next, you will write test code for checking all the fields to be filled. Now, you will write test code for checking that the Login page shows an error message for invalid credentials. Now, you will test that the login.html page should log in successfully with valid credentials. To wrap up the tests for the login.html page, your next test should validate that the user is navigated to catalog.html when clicking the success link.

  5. Challenge

    Creating Register Testing

    You are now ready to validate the register.html page by writing tests in the register.spec.js file.

    You must first test the display of the registration form with the correct fields.

    This test verifies that all the required input fields are present and visible on the registration form. It also checks that the labels associated with these fields have the correct text. Next, you must ensure that when the registration form is submitted with empty fields, validation error messages are displayed for each required field, indicating that they need to be filled in. Next, you must verify that the form displays appropriate validation error messages when invalid data is entered into the fields, ensuring that users are informed of input mistakes.

  6. Challenge

    Expanding Register Testing

    Moving on, you'll now explore how to create a test to successfully register with a valid input and display a success message.

    This test ensures that the form can be successfully submitted with valid inputs, displaying a success message, and confirming the presence of a link to navigate to the catalog page.

    There's one final test to perform. This test confirms that after a successful registration, clicking the link in the success message navigates the user to the catalog page, verifying the link's functionality. Congratulations! You can now check to see if all of your tests pass correctly:

    1. Ensure the application is running locally on localhost, by running the node src/index.js command.
    2. Run the tests using npx playwright test.
    3. Debug any issues by running tests with the --headed flag.
    4. Review the results! Once the tests pass, you should see output in the terminal showing that all tests have passed successfully. If everything works as expected, your test cases are complete.

    By following these steps, you'll be able to ensure your Playwright tests are correctly implemented and verify that all of them pass.

Eduardo is a technology enthusiast, software architect and customer success advocate. He's designed enterprise .NET solutions that extract, validate and automate critical business processes such as Accounts Payable and Mailroom solutions. He's a well-known specialist in the Enterprise Content Management market segment, specifically focusing on data capture & extraction and document process automation.

What's a lab?

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Provided environment for hands-on practice

We will provide the credentials and environment necessary for you to practice right within your browser.

Guided walkthrough

Follow along with the author’s guided walkthrough and build something new in your provided environment!

Did you know?

On average, you retain 75% more of your learning if you get time for practice.