Having problems making Playwright for NET click a button

Question

I am very new to Playwright. I'm using Playwright for NET, because I know .NET much better than I do JavaScript.

I'm writing a Playwright for NET class to test a simple web application we've finished recently. A lot of the problems I'm having is I'm not finding the documentation to be very helpful. I did some searches asking how to click a button on the page, so that it will go to another page. This is something the users do a lot of. (There's a navigation link, but the users are used to using this button to go to the same page.) I'm using xUnit with Playwright for NET. Here is the whole class, which I've only started writing:

using Microsoft.Playwright;
using Microsoft.Playwright.Xunit;

namespace FPTTTests
{
    public class InputTimeTests : PageTest
    {
        [Fact]
        public async Task InputTimeUsingContinue()
        {
            await Page.GotoAsync("https://FPTimetrack");
            await Task.Delay(1000); // Wait for the page to load

            // Go to the Input Time page
            await Page.GetByRole(AriaRole.Button, new() { Name = "Continue" }).ClickAsync();
            await Task.Delay(1000); // Wait for the page to load

            // Now look for the H1 with Input Time
            var h1 = await Expect(Page.GetByRole(AriaRole.Heading, new() { Name = "Input Time" })).ToBeVisibleAsync();
            // Assert.Equal("Input Time", h1);
        }
    }
}

The Page.GotoAsync() method calll works fine.

I am certain the problem I'm encountering is with the Page.GetByRole call using AriaRole.Button. I tried to find documentation describing the syntax and meaning of the parameters to GetByRole, but it wasn't helpful. For example, what is the { Name = "Whatever"} about? I put in "Continue", because that's the caption on the button that goes to the next page. But I know that it isn't going to the next page in the next Expect(Page.GetByRole(AriaRole.Heading... because the value returned is on the home page, but the secondary page. But I've no idea how to correct it, since I cannot find a description for GetByRole and all possible parameters. Please direct me to the correct play.

Answer 1

Hello @Falanga, Rod, DOH ,

I set up a quick local HTML dummy page to run your code, and I have a few suggestions that might solve your issue.

You mentioned you were unsure about the { Name = "Continue" } parameter syntax. Name strictly targets the visible text of the element. The new() { ... } syntax you encountered is simply a standard .NET shorthand for instantiating a PageGetByRoleOptions object.

When reproducing your issue, my test also failed to click. You mentioned a very important detail: "There's a navigation link... users are used to using this button". If front-end developers style an HTML <a> (link) tag with CSS to look like a button, Playwright still strictly maps its semantic role as a Link, not a Button. Changing AriaRole.Button to AriaRole.Link might fix your timeout issue instantly.

Lastly, assigning var h1 = await Expect(...) throws a compiler error because Expect returns void. Expect(...).ToBeVisibleAsync() is the assertion itself, you don't need Assert.Equal. Plus, thanks to Playwright's built-in "Auto-waiting", the Expect method will automatically wait for the heading to render, meaning you can safely delete all the Task.Delay(1000) calls.

It seems your test can be safely shortened to this clean script:

[Fact]
public async Task InputTimeUsingContinue()
{
    await Page.GotoAsync("https://FPTimetrack");
    // Target the Link role instead of Button
    await Page.GetByRole(AriaRole.Link, new() { Name = "Continue" }).ClickAsync();
    // Expect is the assertion and it waits automatically, so no Task.Delay is needed
    await Expect(Page.GetByRole(AriaRole.Heading, new() { Name = "Input Time" })).ToBeVisibleAsync();
}

Below are some resources if you want to dive deeper into the specifics:

• Locating by role
• PageGetByRoleOptions API
• Assertions & Auto-waiting

I hope my testing and research help point you in the right direction. If you found my response helpful or informative, I would greatly appreciate it if you could follow this guide for your confirmation.

Thank you.