Playwright check if text exists

To check if a specific text exists using Playwright in HTML, you can use the following code in JavaScript:

“`javascript
const { chromium } = require(‘playwright’);

(async () => {
// Launch browser
const browser = await chromium.launch();

// Create a new context
const context = await browser.newContext();

// Create a new page
const page = await context.newPage();

// Navigate to a webpage
await page.goto(‘https://example.com’);

// Wait for the desired text to appear
const element = await page.waitForSelector(‘div’);
const text = await element.textContent();

// Check if the desired text exists
const searchText = ‘Hello, World!’;
const isTextExists = text.includes(searchText);

// Output the result
console.log(`Does the text ‘${searchText}’ exist? ${isTextExists}`);

// Close the browser
await browser.close();
})();
“`

Let’s break down the code and explain each step:

1. Import the necessary Playwright libraries.
2. Launch the browser using `chromium.launch()`.
3. Create a new browser context using `browser.newContext()`.
4. Create a new page using `context.newPage()`.
5. Navigate to a webpage using `page.goto(url)`. Replace the `url` with your desired webpage URL.
6. Wait for a specific element using `page.waitForSelector(selector)`. Here, we are waiting for a `

` element to appear. Modify the selector according to your requirements.
7. Obtain the text content of the selected element using `element.textContent()`.
8. Check if the desired text exists using `text.includes(searchText)`. This checks if the `searchText` appears within the obtained text content.
9. Output the result using `console.log()`.
10. Close the browser using `browser.close()`.

Remember to replace the `console.log()` line with your desired output method, such as updating an HTML div element with the result.

The provided code can be placed within a JavaScript script tag in an HTML file. Without the `body`, `h1`, and `html` tags, the basic structure of the HTML file can be as follows:

“`html


“`

In this example, the result will be displayed within a div element with the id ‘result’. You can style the div using CSS as per your requirements.

Leave a comment