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, we explore how to extract different values from a web page , including text values, input field values, and attribute values. These extracted values are essential for validations and driving the logic of test scripts. Extracting Text Values To extract the value of a button, such as the Submit button, follow these steps: Use a selector to identify the button within the form. Create a constant and call the TextContent method to extract the text. Since TextContent is a promise, use await to handle it. Example: const SubmitButtonText = await basicForm.locator('button').TextContent; Log the result to the console to verify the extraction. Extracting Multiple Text Values To extract values from multiple elements, such as radio buttons: Define a locator for all radio buttons. Use the allTextContents method, which returns an array of text values. Example: const AllRadioButtonValues = await page.locator('nbRadio1, nbRadio2, nbRadio3').allTextContents(); Extracting Input Field Values To extract values from input fields: Use the inputValue method instead of TextContent . Example: const emailFieldValue = await emailField.inputValue(); Extracting Attribute Values To extract attribute values, such as a placeholder: Use the getAttribute method. Example: const placeholderValue = await emailField.getAttribute('placeholder'); Summary In summary, the methods to extract values are: textContent for single text values (unique locator required). allTextContents for multiple values (non-unique locator allowed). inputValue for input field values. getAttribute for attribute values. These techniques are crucial for effective test script development.