How to start with Playwright tests for WebViewer

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 my exists.
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> <NumberOfTestWorkers>24</NumberOfTestWorkers> </NUnit>  <RunConfiguration> <EnvironmentVariables>  <DEBUG>pw:api</DEBUG> <SUBSCRIBE>Subscribe to me</SUBSCRIBE> </EnvironmentVariables> </RunConfiguration>  <Playwright> <BrowserName>chromium</BrowserName>  <ExpectTimeout>5000</ExpectTimeout> <LaunchOptions>  <Headless>false</Headless>  </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 Now it will look like this with the correct formatting:

4. Choose your runsetting for your project

Go to and then and choose

In the next window you go to your project folder

and choose your runsettings file

and it.

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 and then to open the Developer Powershell

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 but even in the Inspector: .

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.

Signifikant Knowledge Base