How to use SocksSupport class of Microsoft.Playwright.Core package

The author is available via:

var author = (string)TestContext.CurrentContext.Test.Properties.Get("Author");

If there are multiple Author attributes, this will retrieve the first one. If you want to see them all, use

var authors = (IList)TestContext.CurrentContext.Test.Properties["Author"];

This should do it:

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

Using a selector that finds a list of locators in Playwright is exactly the same as calling .FindElements() in selenium, except that Playwright does not have a specifically named method like .FindLocators().

Playwright - a selector that matches multiple elements returns a list of locators, which you then iterate over:

var rows = page.GetByRole(AriaRole.Listitem);
var count = await rows.CountAsync();
for (int i = 0; i < count; ++i)
  Console.WriteLine(await rows.Nth(i).TextContentAsync());

Selenium - FindElements returns a list of elements that you have to iterate over.

IList < IWebElement > elements = driver.FindElements(By.TagName("p"));
foreach(IWebElement e in elements) {
  System.Console.WriteLine(e.Text);
}

Using a selector that finds a list of locators in Playwright is exactly the same as calling .FindElements() in selenium, except that Playwright does not have a specifically named method like .FindLocators().

Playwright - a selector that matches multiple elements returns a list of locators, which you then iterate over:

var rows = page.GetByRole(AriaRole.Listitem);
var count = await rows.CountAsync();
for (int i = 0; i < count; ++i)
  Console.WriteLine(await rows.Nth(i).TextContentAsync());

Selenium - FindElements returns a list of elements that you have to iterate over.

IList < IWebElement > elements = driver.FindElements(By.TagName("p"));
foreach(IWebElement e in elements) {
  System.Console.WriteLine(e.Text);
}

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;
}
}

The error came from me not correctly understanding Docker stages. Here a fixed Dockerfile, where I installed Playwright in the base stage:

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
RUN apt-get update
RUN apt-get -y install curl gnupg
RUN curl -sL https://deb.nodesource.com/setup_16.x  | bash -
RUN apt-get -y install nodejs
RUN npx playwright install
RUN apt-get update && apt-get install -y --no-install-recommends \
    fonts-liberation\
    libasound2\
    libatk-bridge2.0-0\
    libatk1.0-0\
    libatspi2.0-0\
    libcairo2\
    libcups2\
    libdbus-1-3\
    libdrm2\
    libgbm1\
    libglib2.0-0\
    libgtk-3-0\
    libnspr4\
    libnss3\
    libpango-1.0-0\
    libx11-6\
    libxcb1\
    libxcomposite1\
    libxdamage1\
    libxext6\
    libxfixes3\
    libxrandr2
WORKDIR /app

FROM mcr.microsoft.com/dotnet/sdk:6.0-focal  AS build
WORKDIR /src
COPY ["Dashboard/Dashboard.csproj", "Dashboard/"]
RUN dotnet restore "Dashboard/Dashboard.csproj"
COPY . .
WORKDIR "/src/Dashboard"
RUN dotnet build "Dashboard.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "Dashboard.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "Dashboard.dll"]

I hit the same issue recently.

1. The error you are getting means that the certificates presented by the moon server to your client is incomplete. Try to provide the full chain of certs there!
2. If later, you get the "WebSocket error: self signed certificate in certificate chain" then you need to set the NODE_EXTRA_CA_CERTS env variable pointing at your pem file. This is happening being Node cannot read the trusted CAs by default.

This is the question/solution I posted for the Playwright team along with the resolution.

With Visual Studio projects you can add post-build-events, which will run on you dev machine and in the Azure Pipeline during a build (tested with VSBuild@1)

Example using the VS UI: (you will need to adjust paths for ubuntu)

echo $(TargetDir).playwright\node\win32_x64\playwright.cmd install
$(TargetDir).playwright\node\win32_x64\playwright.cmd install
echo Done

or adding directly to a .csproj

  <Target Name="PostBuild" AfterTargets="PostBuildEvent">
    <Exec Command="echo $(TargetDir).playwright\node\win32_x64\playwright.cmd install;$(TargetDir).playwright\node\win32_x64\playwright.cmd install;echo Done" />
  </Target>

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();