- Lab
- Core Tech
![Labs Labs](/etc.clientlibs/ps/clientlibs/clientlib-site/resources/images/labs/lab-icon.png)
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 Labs](/etc.clientlibs/ps/clientlibs/clientlib-site/resources/images/labs/lab-icon.png)
Path Info
Table of Contents
-
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. Executenode src/index.js
from the second Terminal tab.
2. Executecd 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. Executenode src/index.js
from the second Terminal tab.
2. Executecd 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 thePlaywrightTests
folder, includes the finished testing code forcatalog.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 enteringhttp://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 thesolution/step02/task01.spec.cs
file.
Within thesolution/final
folder, you will find all of the finished project files, which you may open and compare to the tests you write within thePlaywrightTests
folder. -
-
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 thePlaywrightTests
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 ofsrc/public/index.html
, it is essential for Playwright to navigate to the location of the page, by accessing thehttp://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 anh1
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 toregister.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 tologin.html
. -
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, theindex.html
page redirects toregister.html
andlogin.html
, respectively.This is crucially important because it checks whether if the URLs match those respective
register.html
andlogin.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 matchregister.html
andlogin.html
, you must now create a test to verify if the Bootstrap and custom stylesheets are linked correctly. -
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 inlogin.spec.cs
located in thePlaywrightTests
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 thesrc/public/login.html
page should log in successfully with valid credentials. To wrap up the tests for thesrc/public/login.html
page, your next test should validate that the user is navigated tocatalog.html
when clicking the success link. -
Challenge
Create Register Testing
You are now ready to validate the
src/public/register.html
page by writing tests in thePlaywrightTests/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.
-
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:
- Ensure the application is running locally on localhost, by running the
node src/index.js
command using the second tab. - Run the tests using
xvfb-run -a dotnet test
on the first tab. - 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 thePlaywrightTests
match those found within thesolution/final
folder. - Ensure the application is running locally on localhost, by running the
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.