Please add examples on how to integrate Playwright

[efonsecab]

I've been trying to integrated Playwright into my .NET Aspire Test project, however, I haven't found a way to make it work.
I have a problems

• None of the routes from the httpClient created from DistributedApplicationTestingBuilder are accesible from my browser.

[timheuer]

Hi @efonsecab I was thinking about this today as well. The HttpClient won't give you what you need for a Playwright test (assuming you want to do more URI-based/Page-based tests).

Here's a sample I came up with and wonder if you might play around with this and see if meets your needs? (this is using Playwright tests written in MSTest):

[TestMethod]
public async Task BrowseAroundFrontEnd()
{
    var appHost = await DistributedApplicationTestingBuilder.CreateAsync<Projects.AspireApp133_AppHost>();
    await using var app = await appHost.BuildAsync();
    await app.StartAsync();

    // find the named resource I need
    var webResource = appHost.Resources.Where(r=>r.Name == "webfrontend").FirstOrDefault();

    // get the 'http' endpoint for the resource
    var endpoint = webResource.Annotations.OfType<EndpointAnnotation>().Where(x => x.Name == "http").FirstOrDefault();

    // navigate to the UriString of the allocated endpoint 
    await Page.GotoAsync(endpoint.AllocatedEndpoint.UriString);

    await Page.ScreenshotAsync(new PageScreenshotOptions { Path = ".\\screenshot.png" });

    await Page.GetByRole(AriaRole.Heading, new() { Name = "Hello, world!" }).ClickAsync();
    await Page.GetByRole(AriaRole.Link, new() { Name = "Counter" }).ClickAsync();
    await Page.GetByRole(AriaRole.Button, new() { Name = "Click me" }).ClickAsync();
    await Page.GetByRole(AriaRole.Link, new() { Name = "Weather" }).ClickAsync();
    await Page.GetByRole(AriaRole.Heading, new() { Name = "Weather" }).ClickAsync();

}

It's nothing ornate, just was seeing to get the information working with a Page test.

Repo: https://github.com/timheuer/aspire-playwright

I know @ReubenBond is thinking of some other things for test apphost as well so just tagging him to watch feedback.

[efonsecab]

Hi @efonsecab I was thinking about this today as well. The HttpClient won't give you what you need for a Playwright test (assuming you want to do more URI-based/Page-based tests).

Here's a sample I came up with and wonder if you might play around with this and see if meets your needs? (this is using Playwright tests written in MSTest):

[TestMethod]
public async Task BrowseAroundFrontEnd()
{
    var appHost = await DistributedApplicationTestingBuilder.CreateAsync<Projects.AspireApp133_AppHost>();
    await using var app = await appHost.BuildAsync();
    await app.StartAsync();

    // find the named resource I need
    var webResource = appHost.Resources.Where(r=>r.Name == "webfrontend").FirstOrDefault();

    // get the 'http' endpoint for the resource
    var endpoint = webResource.Annotations.OfType<EndpointAnnotation>().Where(x => x.Name == "http").FirstOrDefault();

    // navigate to the UriString of the allocated endpoint 
    await Page.GotoAsync(endpoint.AllocatedEndpoint.UriString);

    await Page.ScreenshotAsync(new PageScreenshotOptions { Path = ".\\screenshot.png" });

    await Page.GetByRole(AriaRole.Heading, new() { Name = "Hello, world!" }).ClickAsync();
    await Page.GetByRole(AriaRole.Link, new() { Name = "Counter" }).ClickAsync();
    await Page.GetByRole(AriaRole.Button, new() { Name = "Click me" }).ClickAsync();
    await Page.GetByRole(AriaRole.Link, new() { Name = "Weather" }).ClickAsync();
    await Page.GetByRole(AriaRole.Heading, new() { Name = "Weather" }).ClickAsync();

}

It's nothing ornate, just was seeing to get the information working with a Page test.

Repo: https://github.com/timheuer/aspire-playwright

I know @ReubenBond is thinking of some other things for test apphost as well so just tagging him to watch feedback.

Thanks @timheuer, that works just fine for me.

[timheuer]

Thanks for confirming @efonsecab -- i'm going to move this to the samples repo as I think still a good issue to properly track a sample, but not a platform issue as of now.

[bradygaster]

I have a few samples on how to do that here: https://github.com/bradygaster/AspireAzdTests/tree/main/AspireAzdTests

I could bring this forward with an updated sample if folks like the idea.