Playwright Java Tutorial: Web Automation Testing | How to work with text fields?
In the previous Playwright tutorial, we learnt to handle single and multi select dropdown fields.
In this tutorial blog, we will be learning to work with text fields using Playwright with Java.
Text Field
A text field allows the user to add or edit text. It is used on the web pages such as Forms, Login windows, Registration Page, e-commerce websites, etc. to take input from the user.
Testing the Text Fields
As these fields ask for important information from the users, testing them is equally important. While performing Manual exploratory testing, a tester might test multiple cases on the respective text field by checking if it is editable, allowing to enter alphanumeric and special characters. Tests are also performed to check if the field allows entering the required length of characters in the field.
The same manual tests can be performed in automation testing as it helps in speedy testing and provides quick feedback.
How to work with text fields using Playwright Java?
While performing automation testing using Playwright with Java, we can do all the checks required to verify that the text field is working fine. These checks include
- Checking that the field is editable
- Moving the current focus on the text field
- Entering value in the field
- Verifying the value entered in the field
- Clearing the field and making it blank
- Key Press Events in the text box field
Performing these checks can help us gain confidence in the functional working of the web application.
Before we begin with the demonstration for playing around with the text field. Let me tell you that Playwright provides some good locator strategies that help in easily locating the text fields. These are as follows:
- getByLabel()
- getByPlaceholder()
- getByRole()
Let’s use the Contact Form page of the Practice Software Testing Tool Shop demo website and locate the First Name field using the above mentioned Playwright locator strategies.
Test Scenario 1 — Locate text field using getByLabel() method and typing values in the field
- Navigate to the Contact Page of Practice Software Testing demo website
- Locate the First Name field using the getByLabel locator strategy
- Enter a valid name in the field.
Implementation
Before we begin writing the automated tests, let’s first discuss the setup and configuration.
A new test class TextFieldTest.java has been created in the tests package, For ease of executing the tests, Playwright and Page interfaces are declared as global variables in the class and accordingly have been instantiated in the setup() method which has the TestNG annotation @Beforeclass over it.
public class TextFieldTest {
private Playwright playwright;
private Page page;
@BeforeClass
public void setup() {
this.playwright = Playwright.create();
final Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setChannel("chrome"));
this.page = browser.newPage();
}
This annotation will allow this setup() method will run before any of the tests and will create a new instance of Playwright and Page interface which can be used in the tests.
A new method locateFirstNameByLabel() is created to automate the test scenario 1.
@Test
public void locateFirstNameByLabel() {
page.navigate("https://practicesoftwaretesting.com/contact");
Locator firstNameField = page.getByLabel("First name");
firstNameField.fill("Faisal");
}
The code will first navigate to the contact page of the website. It will locate the First Name field using its label “First name”. The value “Faisal” will be typed in the field using the fill() method.
The following screenshot taken after executing the tests shows that the First name field was located and value was typed in successfully.
Test Scenario 2 — Locate text field using getByPlaceholder() method
- Navigate to the Contact Page of Practice Software Testing demo website
- Locate the First Name field using the getByPlaceholder() locator strategy
- Type in the value “John” in the field.
Implementation
A new test method locateFirstNameByPlaceholder() is created to handle the test scenario 2. This method will locate the First Name field using the Placeholder text — “Your first name *”.
Next, the fill() method is used for typing in the values in the field. The following screenshot shows the how we can locate the Placeholder text and the text field using the Devtools window of the browser.
@Test
public void locateFirstNameByPlaceholder() {
page.navigate("https://practicesoftwaretesting.com/contact");
Locator firstNameField = page.getByPlaceholder("Your first name *");
firstNameField.fill("John");
}
When the test is executed it locates the field and types the value “John” in the field successfully. The following screenshot provides the evidence of successful test execution.
Test Scenario 3 — Locate text field using getByRole() method
- Navigate to the Contact Page of Practice Software Testing demo website
- Locate the First name field using the getByRole locator strategy
- Type the value “Tom” in the field
Implementation
A new test method locateFirstNameByRole() is created that locates the First Name field using the getByRole locator strategy and types in the value “Tom” in the field.
@Test
public void locateFirstNameByRole() {
page.navigate("https://practicesoftwaretesting.com/contact");
Locator firstNameField = page.getByRole(AriaRole.TEXTBOX, new Page.GetByRoleOptions().setName("First name"));
firstNameField.fill("Tom");
}
The following is the screenshot of the Devtools window of Chrome browser that is used for locating the First name field.
As the field is a text box the option AriaRole.TEXTBOX is used and accordingly the next option supplied is the name of the field “First name”. Finally, the fill() method is used to type values in the field.
The following screenshot of test execution shows that the field was located and values were typed in the field successfully.
Having learnt about the locator strategy and typing the values in the text field. We may come across scenarios where we would need to focus on the field first and then interact with it. In the next scenario, we will check out how to focus on a field.
Test Scenario 4 — Focusing on a text field
- Navigate to the Contact Page of Practice Software Testing demo website
- Locate the Email Address field and set focus on it
- Check if the focus is set by performing assertion on the field
Implementation
A new test method testFocusOnField() is created inside the TextFieldTest class. This method will locate the Email address field and set the focus on it.
@Test
public void testFocusOnField() {
page.navigate("https://practicesoftwaretesting.com/contact");
Locator emaiAddressField = page.getByLabel("Email address");
emailAddressField.focus();
assertThat(emailAddressField).isFocused();
}
The focus() method will be used for setting the focus on the field. At the end, an assertion statement checks whether the Email address field is focused successfully. The isFocused() method verifies whether the test field is in focus or not.
The following screenshot of test execution shows that the Email address field was located and focus was set on it.
In the next scenario, let’s learn how to fetch the values from the text field. This might come handy to perform assertions and verify that whatever values we are entering through automated tests are correctly passed in the field.
Test Scenario 5 — Getting values from the text field
- Navigate to the Contact Page of Practice Software Testing demo website
- Locate the Email Address field and type the value “[email protected]”
- Verify by fetching the value that was entered in the field
Implementation
A new test method testGetValuesFromTextField() is created for testing this scenario. The Email Address field is located using the getByLabel() method and values are entered in the field using the fill() method.
@Test
public void testGetValuesFromTextField() {
page.navigate("https://practicesoftwaretesting.com/contact");
Locator emailAddressField = page.getByLabel("Email address");
String emailAddress = "[email protected]";
emailAddressField.fill(emailAddress);
String emailValue = emailAddressField.inputValue();
System.out.println(emailValue);
assertThat(emailAddressField).hasValue(emailValue);
}
To fetch the values from the text field, the inputValue() method is used. This method returns the value for matching or or <select> element in String format. We will print the value in the console after fetching it from the field.</p><p>Finally, the assert statement checks that the <em>Email Address</em> field has the value that was typed in the field.</p><p>The following screenshot of the test execution from IntelliJ IDE shows that the value was fetched and printed from the <em>Email Address</em> field correctly, also the assertion statement worked fine passing the test.</p><figure><img class="bqrUnknownImgSize" alt src="https://cdn-images-1.medium.com/max/1024/1*-L5NP9eIvIknNlIWedywqQ.png"></figure><p>In the next scenario, let’s learn how to clear the values that are present in the field so we don’t append to the existing values.</p><h4>Test Scenario 6 — Clearing the values from the field</h4><ol><li>Navigate to the <a target="_blank" rel="noopener" href="https://practicesoftwaretesting.com/contact">Contact Page</a> of <a target="_blank" rel="noopener" href="https://practicesoftwaretesting.com/">Practice Software Testing</a> demo website</li><li>Locate the <em>Message</em> field and type a message in the field</li><li>Clear the <em>Message</em> field and type a new message in the field</li><li>Fetch the latest value entered in the field and assert it to check that the field was cleared and only the latest message is present in the field</li></ol><h4>Implementation</h4><p>A new test method <em>testClearFieldValues() </em>is created to handle this scenario. This method will initially locate the <em>Message</em> field using the <em>getByLabel()</em> method. Next, it will type the message provided in the String variable <em>messageOne</em>. After entering the first message, the field will be cleared using the <em>clear()</em> method.</p><pre> @Test<br> public void testClearFieldValues() {<br> page.navigate("<a target="_blank" rel="noopener" href="https://practicesoftwaretesting.com/contact">https://practicesoftwaretesting.com/contact</a>");<br> Locator messageField = page.getByLabel("Message *");<br> String messageOne = "This is the first message";<br> messageField.fill(messageOne);<br><br> messageField.clear();<br> String messageTwo = "This is the second message";<br> messageField.fill(messageTwo);<br><br> assertThat(messageField).hasValue(messageTwo);<br> }</pre><p>After the field is cleared, the second message text <em>“This is a second message”</em> that is saved in the <em>messageTwo</em> String variable, will be entered in the field. Finally, an assertion will be performed to check that the field has the value from the <em>messageTwo</em> String variable.</p><p>The following screenshot of the test execution shows that the tests were executed successfully and the text from <em>messageTwo</em> variable is the only value available in the field meaning that the <em>clear()</em> method did its job successfully.</p><figure><img class="bqrUnknownImgSize" alt src="https://cdn-images-1.medium.com/max/1024/1*M-4H6OrKSzfcic6KtISi7w.png"></figure><figure><img class="bqrUnknownImgSize" alt src="https://cdn-images-1.medium.com/max/1024/1*Bguma1fD71_LEmEHwzdY8g.png"></figure><p>Having covered almost all of the scenarios that are practically useful for writing automation tests. Let’s jump to the last scenario where we will learn how to press the different keyboard keys using Playwright.</p><h4><strong>Test Scenario 7— Pressing different keys using Playwright</strong></h4><ol><li>Navigate to the <a target="_blank" rel="noopener" href="https://the-internet.herokuapp.com/key_presses">Key Presses</a> page on the <a target="_blank" rel="noopener" href="https://the-internet.herokuapp.com/">The Internet Heroku app</a> demo website</li><li>Press some random keys on the keyboard</li><li>Check if the keys were pressed correctly</li></ol><figure><img class="bqrUnknownImgSize" alt src="https://cdn-images-1.medium.com/max/1024/1*PM-B4GrwW3cukkW2vwc75g.png"></figure><h4><strong>Implementation</strong></h4><p>A new test method <em>testKeyPress()</em> is created to handle the key press scenario. The test first navigates to the <em>The Internet Herokuapp</em> demo website’s <em>Key Presses</em> window. Next, it locates the text box that allows taking key presses as an input.</p><pre>@Test<br>public void testKeyPress() {<br> page.navigate("<a target="_blank" rel="noopener" href="https://the-internet.herokuapp.com/key_presses">https://the-internet.herokuapp.com/key_presses</a>");<br> Locator textBox = page.locator("#target");<br> textBox.press("Alt");<br> Locator resultText = page.locator("p#result");<br><br> assertThat(resultText).containsText("ALT");<br><br> textBox.press("Shift");<br> assertThat(resultText).containsText("SHIFT");<br><br> textBox.press("N");<br> assertThat(resultText).containsText("N");<br><br> textBox.press("9");<br> assertThat(resultText).containsText("9");<br>}</pre><p>The <em>press()</em> method in Playwright is used for performing the Key Press action.</p><p>Following are key press events that can be used with the <em>press() </em>method.</p><blockquote>Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape,<br>ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight,<br>ArrowUp, F1 — F12, Digit0 — Digit9, KeyA — KeyZ, etc.</blockquote><p>The first key press is performed by pressing the “ALT” key. When a particular key is pressed the page shows the respective key name below the field.</p><p>This key name text is located using the <em>resultText</em> Locator and finally an assertion is performed to check that it shows the correct key name that was pressed.</p><p>Similarly, the other lines of code perform different key presses like pressing the <em>Shift</em> Key, pressing letter <em>“N”</em> key and pressing <em>“9”</em> number key and respectively performing the assertions.</p><p>The following screenshot of the test execution shows that the key press test was run successfully.</p><figure><img class="bqrUnknownImgSize" alt src="https://cdn-images-1.medium.com/max/1024/1*Z6cXLBtC0rlha0aS29U_DA.png"></figure><h3>Conclusion</h3><p>Text field is an important component of the website. This field is used widely on crucial pages such as Login, Registration, e-commerce websites for ordering products and many more. In this tutorial we learnt different ways to work around the Text field.</p><p>I would recommend to try working with the text field using Playwright with Java.</p><p>Happy Testing!</p>