Playwright-dotnet

Finally I was able to find a way to run the tests inside a Docker container using a custom image. Here is what I've done:

FROM mcr.microsoft.com/dotnet/sdk:5.0.404-focal AS build
WORKDIR /src
COPY ["PlaywrightSharp/PlaywrightSharp.csproj", "PlaywrightSharp/"]
RUN dotnet restore "PlaywrightSharp/PlaywrightSharp.csproj"

COPY . .
WORKDIR "/src/PlaywrightSharp"

RUN apt-get update -yq && apt-get upgrade -yq && apt-get install -yq curl git nano
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -yq nodejs build-essential
RUN npm install -g npm

RUN apt-get install -y wget xvfb unzip

# Set up the Chrome PPA
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list

# Update the package list and install chrome
RUN apt-get update -y
RUN apt-get install -y google-chrome-stable
RUN apt-get install -y firefox

#RUN dotnet add package Microsoft.Playwright
RUN dotnet build "PlaywrightSharp.csproj" -c Release -o /app/build
RUN npx playwright install-deps
RUN npx playwright install


FROM build AS testrunner
WORKDIR "/src/PlaywrightSharp"
CMD ["dotnet", "test", "--no-restore", "--settings:Firefox.runsettings", "--logger:trx"]

It looks like npx playwright install-deps was not enough to run the tests and I had to install Chrome and Firefox also.

The right CSS selector for that is DIV.v-image__image.v-image__image--contain

const browser = await playwright.chromium.launch({ headless: false });
let page = await browser.newPage();
await page.setContent(`
<div class="v-image__image v-image__image--contain" 
style='background-image: url("https://example.com/myimage.jpg"); 
background-position: right center;'></div>
`);

const el = await page.$("DIV.v-image__image.v-image__image--contain");
const styleProperty = await el.getProperty("style");
const style = await styleProperty.jsonValue();
console.log(style.backgroundImage);
await browser.close();

Playwright recommends to use their assertions, since they retry until either the timeout is reached or the condition is met.

Normal assertions like Assert.Equal don't retry.

See here: https://playwright.dev/dotnet/docs/test-assertions#locator-assertions-to-have-text

For your use-case it would be the following:

var locator = Page.Locator(".title");
await Expect(locator).ToHaveTextAsync("Welcome, Test User");

# Install the CLI once.
dotnet tool install --global Microsoft.Playwright.CLI
# Install the browsers
playwright install

(The current error description is a bug in 1.14, it gets fixed with 1.15.)

So I resolved this with the following logic.

I created two variables:

1. List<string> downloadedFiles = new List<string>();
2. List<string> fileDownloadSession = new();

I then created a method to add as a handler to the page.Download that looks like this:

private async void downloadHandler(object sender, IDownload download)
{
    fileDownloadSession.Add("Downloading...");
    var waiter = await download.PathAsync();
    downloadedFiles.Add(waiter);
    fileDownloadSession.Remove(fileDownloadSession.First());
}

Afterwards, I created a public method to get the downloaded files that looks like this:

public List<string> GetDownloadedFiles()
{
    while (fileDownloadSession.Any())
    {
        
    }
    
    var downloadedFilesList = downloadedFiles;
    downloadedFiles = new List<string>();
    return downloadedFilesList;
}

All these methods and planning are in a separate class of their own so that they can monitor the downloaded files properly, and also to freeze the main thread so it can grab all of the required files.

All in all it seems just as sketchy of a solution, similarly to how you would implement it in Selenium, nothing much has changed in terms of junkyard implementations in the new frameworks.

You can find my custom class here: https://paste.mod.gg/rztmzncvtagi/0, enjoy, there is no other topic that answers this specific question for playwright on C#.

Code here, in case it gets deleted from paste.mod.gg:

using System.Net;
using System.Runtime.InteropServices.JavaScript;
using Flanium;
using FlaUI.UIA3;
using Microsoft.Playwright;
using MoreLinq;
using Polly;

namespace Fight;

public class WebBrowser
{
    private IBrowser _browser;
    private IBrowserContext _context;
    private IPage _page;
    private bool _force;
    private List<string> downloadedFiles = new List<string>();
    private List<string> fileDownloadSession = new();

    public void EagerMode()
    {
        _force = true;
    }
    
    public enum BrowserType
    {
        None,
        Chrome,
        Firefox,
    }

    public IPage GetPage()
    {
        return _page;
    }
    public WebBrowser(BrowserType browserType = BrowserType.Chrome, bool headlessMode = false)
    {
        var playwright = Playwright.CreateAsync().Result;

        _browser = browserType switch
        {
            BrowserType.Chrome => playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions {Headless = headlessMode}).Result,
            BrowserType.Firefox => playwright.Firefox.LaunchAsync(new BrowserTypeLaunchOptions {Headless = headlessMode}).Result,
            _ => null
        };

        _context = _browser.NewContextAsync().Result;
        _page = _context.NewPageAsync().Result;
        _page.Download += downloadHandler;
        
        Console.WriteLine("WebBrowser was successfully started.");
    }

    private async void downloadHandler(object sender, IDownload download)
    {
        fileDownloadSession.Add("Downloading...");
        var waiter = await download.PathAsync();
        downloadedFiles.Add(waiter);
        fileDownloadSession.Remove(fileDownloadSession.First());
    }
    
    public List<string> GetDownloadedFiles()
    {
        while (fileDownloadSession.Any())
        {
            
        }
        
        var downloadedFilesList = downloadedFiles;
        downloadedFiles = new List<string>();
        return downloadedFilesList;
    }
    
    
    public void Navigate(string url)
    {
        _page.GotoAsync(url).Wait();
    }

    public void Close(string containedURL)
    {
        var pages = _context.Pages.Where(x => x.Url.Contains(containedURL));
        if (pages.Any())
            pages.ForEach(x => x.CloseAsync().Wait());
    }





    public IElementHandle Click(string selector, int retries = 15, int retryInterval = 1)
    {
        var element = Policy.HandleResult<IElementHandle>(result => result == null)
            .WaitAndRetry(retries, interval => TimeSpan.FromSeconds(retryInterval))
            .Execute(() =>
            {
                var element = FindElement(selector);
                if (element != null)
                {
                    try
                    {
                        element.ClickAsync(new ElementHandleClickOptions() {Force = _force}).Wait();
                        element.DisposeAsync();
                        return element;
                    }
                    catch (Exception e)
                    {
                        return null;
                    }
                }

                return null;
            });
        
        return element;
    }

    public IElementHandle FindElement(string selector)
    {
        IElementHandle element = null;

        var Pages = _context.Pages.ToArray();

        foreach (var w in Pages)
        {
            //============================================================
            element = w.QuerySelectorAsync(selector).Result;
    

    if (element != null)
        {
            return element;
        }

        //============================================================
        var iframes = w.Frames.ToList();
        var index = 0;

        for (; index < iframes.Count; index++)
        {
            var frame = iframes[index];

            
            element = frame.QuerySelectorAsync(selector).Result;
            if (element is not null)
            {
                return element;
            }

            var children = frame.ChildFrames;

            if (children.Count > 0 && iframes.Any(x => children.Any(y => y.Equals(x))) == false)
            {
                iframes.InsertRange(index + 1, children);
                index--;
            }
        }
    }

    return element;
}
}

What I've done is add a runsettings file to visual studio called, for example, test.runsettings with the following content:

<?xml version="1.0" encoding="utf-8"?>
<RunSettings>
  <RunConfiguration>
    <EnvironmentVariables>
        <HEADED>1</HEADED>
    </EnvironmentVariables>
  </RunConfiguration>
</RunSettings>

Then, as long as VS chooses that runsettings file (see Test > Configure Run Settings in the menu) you should start getting HEADED mode

Playwright for .NET discourages using xunit see here. Also the playwright.config file does only work for Node.js.

I'd recommend to set the DEBUG=pw:api env var to get more logs. Most likely your site is not reachable or hangs.

Finally I was able to find a way to run the tests inside a Docker container using a custom image. Here is what I've done:

FROM mcr.microsoft.com/dotnet/sdk:5.0.404-focal AS build
WORKDIR /src
COPY ["PlaywrightSharp/PlaywrightSharp.csproj", "PlaywrightSharp/"]
RUN dotnet restore "PlaywrightSharp/PlaywrightSharp.csproj"

COPY . .
WORKDIR "/src/PlaywrightSharp"

RUN apt-get update -yq && apt-get upgrade -yq && apt-get install -yq curl git nano
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -yq nodejs build-essential
RUN npm install -g npm

RUN apt-get install -y wget xvfb unzip

# Set up the Chrome PPA
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list

# Update the package list and install chrome
RUN apt-get update -y
RUN apt-get install -y google-chrome-stable
RUN apt-get install -y firefox

#RUN dotnet add package Microsoft.Playwright
RUN dotnet build "PlaywrightSharp.csproj" -c Release -o /app/build
RUN npx playwright install-deps
RUN npx playwright install


FROM build AS testrunner
WORKDIR "/src/PlaywrightSharp"
CMD ["dotnet", "test", "--no-restore", "--settings:Firefox.runsettings", "--logger:trx"]

It looks like npx playwright install-deps was not enough to run the tests and I had to install Chrome and Firefox also.

This should do it:

ILocator service17 = page.Locator("//span[text()=ServiceName" + ServiceName + "]");