This article is part of the “Introduction to E2E Testing with Reqnroll × Playwright” series.
Playwright Click and Type in C#: How to Interact with Elements
If you’re writing E2E tests with Playwright in .NET, clicking elements and typing into inputs are the most essential operations. Mastering these basics allows you to automate most UI interactions quickly and reliably.
In this guide, you’ll learn how to click elements, enter text, and structure clean test code using Playwright with C#.
How Playwright Interacts with Elements
Playwright works by selecting elements using selectors, then performing actions on them.
The basic flow is:
- Select an element
- Perform an action (click, type, etc.)
Basic Example
await Page.ClickAsync("button");
This clicks the first <button> element on the page.
How to Click Elements in Playwright
Click by ID
await Page.ClickAsync("#login-button");
HTML example:
<button id="login-button">Login</button>
Click by Class
await Page.ClickAsync(".submit-button");
HTML example:
<button class="submit-button">Submit</button>
Click by Text
await Page.ClickAsync("text=Login");
This clicks an element that contains the text “Login”.
How to Type into Input Fields
To enter text into an input field, use FillAsync.
Enter Username
await Page.FillAsync("#username", "testuser");
HTML example:
<input id="username" type="text">
Enter Password
await Page.FillAsync("#password", "password123");
HTML example:
<input id="password" type="password">
Full Example: Login Flow
Here’s a typical login automation example.
HTML
<input id="username">
<input id="password">
<button id="login-button">Login</button>
Playwright Code
await Page.FillAsync("#username", "testuser");
await Page.FillAsync("#password", "password123");
await Page.ClickAsync("#login-button");
This performs:
- Enter username
- Enter password
- Click login button
Using Playwright in Reqnroll StepDefinitions
When combined with Reqnroll, you can map UI actions directly to BDD steps.
Enter Credentials
[When(@"the user enters username and password")]
public async Task WhenLogin()
{
await Page.FillAsync("#username", "testuser");
await Page.FillAsync("#password", "password123");
}
Click Login Button
[When(@"the user clicks the login button")]
public async Task WhenClickLogin()
{
await Page.ClickAsync("#login-button");
}
This keeps your test scenarios readable and aligned with user behavior.
Common Selectors in Playwright
Here are frequently used selectors:
| Type | Example |
|---|---|
| ID | #login |
| Class | .button |
| Element | button |
| Text | text=Login |
| Attribute | [name='username'] |
Example
await Page.FillAsync("[name='username']", "testuser");
Using Locator (Recommended)
Playwright also provides the Locator API, which is more flexible and maintainable.
Click with Locator
await Page.Locator("#login-button").ClickAsync();
Type with Locator
await Page.Locator("#username").FillAsync("testuser");
Why Use Locator?
- Better readability
- Easier reuse
- More robust element handling
Summary
Here are the key takeaways for interacting with elements in Playwright:
Basic Actions
await Page.ClickAsync("selector");
await Page.FillAsync("selector", "text");
Common Selectors
#id.classtext=Text[attribute=value]
By combining these operations with Reqnroll, you can build clean, BDD-style E2E tests that are both readable and maintainable.
If you’re getting started with Playwright, mastering click and input actions is the first step toward building powerful UI test automation.
