How to start with Playwright tests for WebViewer
- Nicole Walter
Step-by-step guide for testing with Playwright
Step-by-step with VisualStudio
Step-by-step with Powershell
1. Create a new test project in Tests folder
Right klick on the
folder
Go to Powershell and to your project folder. The folder where you have your solution file. For me it is
C:\Git\Deploys\WebViewer where myexists.
Now you write
Now you should get:
Change to your project
2. Install Playwright
Right click on your project in the solution explorer
and choose
Go to
, take care you choose
, otherwise you do not find Playwright. Then write
in the searchbar.
Choose:
and
. Then
.
Now right click on your project and then
. Wait until your
Go to Powershell, to your project folder and type in
Write
and hopefully get something like this
Now you need to build your project. Write this
and get
Now go to
and write:
Now you have installed playwright and the stuff for the browsers
These mapps
should be here:
C:\Users\YourName\AppData\Local\ms-playwright\
Your Packages in your Dependencies of your Project should look like this
3. Add runsettings file
Right click on your project in the solution explorer
and choose
. Give it a name like
. “My” can be replaced with every name you want. Now
When you see your file after adding, it looks like this:
Put this example code inside instead
<?xml version="1.0" encoding="utf-8"?> <RunSettings> <!-- NUnit adapter --> <NUnit> <NumberOfTestWorkers>24</NumberOfTestWorkers> </NUnit> <!-- General run configuration --> <RunConfiguration> <EnvironmentVariables> <!-- For debugging selectors, it's recommend to set the following environment variable --> <DEBUG>pw:api</DEBUG> <SUBSCRIBE>Subscribe to me</SUBSCRIBE> </EnvironmentVariables> </RunConfiguration> <!-- Playwright --> <Playwright> <BrowserName>chromium</BrowserName> <!--chromium, firefox, webkkit--> <ExpectTimeout>5000</ExpectTimeout> <LaunchOptions> <!--Running tests in headless mode (without opening a browser window) can make them run faster and is useful for CI/CD pipelines.--> <Headless>false</Headless> <!--<Channel>msedge</Channel> --><!--Which version playwright tests against msedge, chrome and the beta versions and msedgedev --> </LaunchOptions> </Playwright> <TestRunParameters> <Parameter name="WebViewer.BrowserTest" value="Subscribe"></Parameter> </TestRunParameters> </RunSettings>
(You can get explanations and more examples here: https://playwright.dev/dotnet/docs/test-runners )
Now right click on your runsettings file and click on 
4. Choose your runsetting for your project
Go to 
In the next window you go to your project folder
and choose your runsettings file
and 
5. Write and run your test
Here is a short exampel test which you can put into your UnitTest1.cs to try if you installed everything correct.
using Microsoft.Playwright.NUnit;
using Microsoft.Playwright;
namespace WebViewerPlaywrightTests;
[Parallelizable(ParallelScope.Self)]
[TestFixture]
public class Tests : PageTest
{
[Test]
public async Task MyTest()
{
await Page.GotoAsync("http://localhost:65513/en-GB/Dometic/Account/Login?returnUrl=%2Fen-GB%2FDometic%2FCatalogue%2F1");
await Page.GetByRole(AriaRole.Button, new() { Name = "I accept cookies" }).ClickAsync();
await Page.GetByPlaceholder("User name").ClickAsync();
await Page.GetByPlaceholder("User name").FillAsync("sign");
await Page.GetByPlaceholder("Password").ClickAsync();
await Page.GetByPlaceholder("Password").FillAsync("sign");
await Page.GetByRole(AriaRole.Button, new() { Name = "Sign in" }).ClickAsync();
await Expect(Page.GetByRole(AriaRole.Link, new() { Name = "Start page" })).ToBeVisibleAsync();
}
}If you wrote a localhost test like the example, start VisualStudio in a second instans and compile the WebViewer project.
When the browser is open and looks for example like this:
go back to the VisualStudio with your test project.
Now open the 
You find it here:
Choose your test
and click the green triangle or a bit more down the page on 
If everything works fine it should look like this now:
6. Codegen
Go to 
Go to your project
and now write
Enter.
Now these two windows opened:
Go to the Playwright Inspector and change from Library to NUnit
Copy the address from the browser, for example http://localhost:65513/en-GB/Dometic and paste
it into codegen. See in the Playwright Inspector how the code has been changed.
If you now click araound a bit on the page you will see how even these steps will be added to the code. Check always that you have the red Record on both in the browser 
This code can you now copy and paste into your test file in VisualStudio to use it as it is or to edit and put other functionality inside. Then run the test as usual.
Good luck!
7. Link for more playwright information
8. Short demo video about Playwright
9. Discussion after the demo