Getting Text from Web Elements | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Locators and Assertions
Instructor: Artem Bondar
Lesson Summary
In this lesson, you will learn how to extract HTML text from a web page and save it into a constant or variable. This value can be used for assertions or other operations in your code. Here are the key points covered: Extracting Button Text To extract the text from a button: Use the locator for the button. Create a constant, e.g., buttonText . Assign the button text using await basicForm.locator('button').textContent . Make an assertion: expect(buttonText).toEqual('submit') . Extracting All Text Values To get values from multiple elements, such as radio buttons: Use the locator for the radio buttons. Create a constant for all labels, e.g., allRadioButtonLabels . Use await page.locator('radio buttons').allTextContents() to get all values. Make an assertion to check if the array contains a specific value. Getting Input Field Values To retrieve the value from an input field: Create a locator for the input field. Fill the input field with a value. Use await emailField.inputValue() to get the input value. Assert the value: expect(emailValue).toEqual('[email protected]') . Extracting Attribute Values To get the value of an attribute: Use the locator for the element. Call await emailField.getAttribute('placeholder') to retrieve the attribute value. Make an assertion: expect(placeholderValue).toEqual('email') . In summary, use the following methods based on your needs: Single text: textContent All text: allTextContents Input value: inputValue Attribute value: getAttribute Don't forget to commit and push your code to the remote repository at the end of the lesson!
Video Transcript
In this lesson, you will learn how to extract HTML text from the page and save it into the constant or variable. This value can be later used for the assertions, or maybe to use this value later in your code for some other operations. So in this lesson, we will learn how to do that. And by the way, don't forget to create commit at the end of this lesson and push your code to the remote repository. So let's get into it. So let me start a new test for that. And here is our test application. So in the previous lesson, we worked with a basic form. And let's say we want to get the text of this button, submit button from the basic form. And we want to validate that the button text on the basic form is submit. If I make a right click and inspect the element, we can see that yes, this is a submit text. That is a text for the button on the basic form. So how to get a single text value? Let me take the locator for the basic form as our starting point from the previous test. I want to create a new constant and call it button text. Then I want to grab the text from the button and assign this text into this context. So I'm doing await basic form dot locator. We're looking for the button. And the way how we extract the text from the web element is using the method text content. That's it. So Playwright will take the text from this button and assign to the variable. And right now we can make assertion. Expect button text to equal submit. That's it. So let's run this test. We have a new test here and let me run it. Okay, we can see test passed successfully. So here is the step, assertion passed. And let's say if I change submit to let's say submit to. And let me forcefully fail this test. And test failed. And because of the assertion, we expected submit to but received as submit. So we got the text assigned to the button text and then made a comparison of the button text constant and value submit to and of course it's not equal. Okay, so moving on. How to get all text values. So let's look into this example. So we have these radio buttons. So one, two and one radio button is disabled. So let's take all radio buttons and validate that at least one of the radio button should have the value of option one. So let's do something like this. Wait page.locator and the locator for a radio button, right click, inspect. We have this NBRadio one, two and three. So we can use NBRadio and the way to get all the values we need to use all text contents method and assign the result to a new constant. All radio buttons labels, something like that. And we can make assertion, expect that all radio button label to contain, because we are looking for just one value. Option one. So using method all text contents, we'll grab all the values from the each of the element and put those values in the form of the array. And then we validate that this array contains option one. So let me run it. And this test passed. Here we go. And let me run it and feel, for example, option one, two, run this test one more time, and I will show you how it's going to be fail. Okay. Test failed. And look at what it says. Received array, option one, option two and disabled option. So it grabbed for us all three values and we validating that option one is part of this array. And since we provided option one, two, option one, two is not the part of this array, that's why this test failed. So changing back again. So the next example, how to find the value of the input field, input value. Remember I mentioned before that not all text that you see on the page is actually a text. Some of those are properties or just, you know, hidden values. A good example would be this. If I type here, for example, test at test.com, right? And click enter. We see that this text is displayed on the page. But if I make a right click and inspect, we don't see this text actually inside of this input field. So if you try to make a validation that this text should be displayed in this input field, or if you try to make a validation that this text should be displayed in this input field, or if you try to get this text from the input field using method text content or all text contents, it will not work. You will need something different. So let me start first with creating a locator for the email field. So we create a test email field equals to basic form dot get by role text box with the name email. And now we want to fill this email with a value email field, fill test at test.com. And now let's make assertion of this value await email field. And we want to first grab the value from this input field. And we use a method input value. This is what you need to use and assign this result to a new constant. Const email value equals to email field input value. And we can make assertion. Expect email value to equal test at test.com. That's it. Let's run it. Yeah, this test passed successfully. So one more time, if you want to grab a value from the web page, which is not a text, which is an input field value, you need to use a method input value. And it will return a text that is inside of this input value. And the last example, let's say we want to get the value of the attribute. So looking one more time in our email input field, right click, inspect. And we can see we have a bunch of different, different attributes. And sometimes those attributes changing their values based on the state of the application. And let's say we want to validate that this placeholder attribute has a value email, something like that. So how to grab this and make this validation? Constant, I create a new constant for placeholder value equals to await. And I'll use the previously created locator, which is email field. And I call a method get attribute. And inside of the get attribute, I provide the attribute name that I want to get the value for. And the attribute name is placeholder. That's it. And now I can make assertion, expect placeholder value to equal email. And running this test again. Okay, this passed successfully. We see assertion was successful. All right, let's quickly summarize what we did in this lesson. If you want to grab a single text from the web page for your web element, you need to use method text content. If you want to grab all text elements for the list of the web elements, in this example was radio buttons, you need to use a method all text contents. If you want to get the property value of the input fields, for example, which is not a text, you need to use a method input value. And if you want to get the value of any attributes on the web page, use method get attribute and as an argument provide the name of the attribute. And you will get the value of that particular attribute. All right, that's it guys. And see you in the next lesson.