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 C#

Unlock the full potential of end-to-end testing with Playwright and C# in this comprehensive, guided Code Lab. You'll learn to perform critical tests on a simple e-commerce website, covering user registration and login functionalities.. By the end of this session, you'll have hands-on experience with Playwright's powerful features and be well-equipped to ensure your web applications run flawlessly using C#.

Labs

Path Info

Level
Clock icon Beginner
Duration
Clock icon 1h 4m
Published
Clock icon Nov 14, 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 C# 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 C#, HTML, and JavaScript.

    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.

    info>To get started:

    1. Execute node src/index.js from the second Terminal tab.

    2. Execute cd PlaywrightTests from the first Terminal tab.

    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 PlaywrightTests folder, where you will find the following files:

      index.spec.cs
      The `PlaywrightTests/index.spec.cs` file is where you will write the code for testing the functionality of `src/public/index.html`.
      login.spec.cs
      The `PlaywrightTests/login.spec.cs` file is where you will write the code for testing the functionality of the `src/public/login.html` and `src/public/login.cs` files.
      register.spec.cs
      The `Playwright/register.spec.cs` file is where you will write the code for testing the functionality of the `src/public/register.html` and `src/public/register.cs` files.
      catalog.spec.cs
      The `Playwright/catalog.spec.cs` file is where you will write the code for testing the functionality of the `src/public/catalog.html` and `src/public/catalog.cs` files.

    info>Steps to run the tests manually:

    1. Execute node src/index.js from the second Terminal tab.

    2. Execute cd PlaywrightTests from the first Terminal tab.

    3. Execute the test from the first Terminal tab, for example:

    xvfb-run -a dotnet test --filter CatalogTests

    Note: Some tests can take several minutes to complete.

    The catalog.spec.cs file, within the PlaywrightTests folder, includes the finished testing code for catalog.html, as an example.

    The UnitTest1.cs file, within the PlaywrightTests folder, is a default example on how to use C# to write Playwright tests. You may use it as a guide.

    info>First, execute node src/index.js from the second Terminal tab to get the website up and running.

    You can check that the ABC Mobile Carrier site is running by going to the Web Browser tab and entering http://localhost:3000/ in the address bar.

    Once that has been done, you can proceed to each of the steps within the lab and execute each task as you go.

    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.cs file.

    Within the solution/final folder, you will find all of the finished project files, which you may open and compare to the tests you write within the PlaywrightTestsfolder.

  2. Challenge

    Create 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.cs file located in the PlaywrightTests 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

    Expand 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 PlaywrightTests/index.spec.cs 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

    Create 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.cs located in the PlaywrightTests directory.

    First, navigate to src/public/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 src/public/login.html page should log in successfully with valid credentials. To wrap up the tests for the src/public/login.html page, your next test should validate that the user is navigated to catalog.html when clicking the success link.

  5. Challenge

    Create Register Testing

    You are now ready to validate the src/public/register.html page by writing tests in the PlaywrightTests/register.spec.cs 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 using the second tab.
    2. Run the tests using xvfb-run -a dotnet test on the first tab.
    3. 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.

    If things aren't working as expected, feel free to check if the *.spec.cs files you've been working on within the PlaywrightTests match those found within the solution/final folder.

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.