Asserting multiple elements that have same value
Hi guys, I have a scenario in which I have multiple elements(not strict number) containing same text, how should I assert that the text is the same for all of them. What I can see in the docs is that I can assert text in a list, however the given array should be with the same length as the elements count(can do it with a loop, but... not cool). Any ideas? Additional note... any tutorials with working with multiple elements are going to be helpfull, so far it seems that playwright doesn't like adding elements in collections 🙂
This thread is trying to answer question "How can I assert that multiple elements (with a dynamic count) contain the same text in a simple way, without having to loop through each element?"
It's not an issues getting the locator, the problem is that I can't figure out a simple way to assert that I have 6 elements containing the same innerText. I don't have issue counting them, then creating a loop to check if .nth() element has the text inside it, but it looks like an overkill (it's implemented like that currently). Also it's a dynamic thingy, so I cannot rely on expect(elements.count()).toBe(6) , because the 6 can be something else
I can get the count in the test, however it is not predefined, so it is dynamic for the test.
Especially my case in the moment is:
We have a dashboard with widgets, I'm applying a named filter, name of that filter should be shown in the widget box, I wan't to assert that for every widget there is a filter with that name.
Actually imagine it like Discord, on some threads there is a pill with text 'NEW' I want to verify that if there is a pill, it should have the 'NEW' text in it.
In playwright there is: expect(elements).toHaveText(['NEW']) however, the array in toHaveText, should have same count as the elements in the expect.
Was hoping that there is something like allEqual() (that's from underscore.)
Eventually will go with
const isSame = arr.every((x) => x === arr[0]);
but that also seems ugly.... ish
Related Ask AI answer for "What is the method to check if multiple elements contain the same text in Playwright?".
Answer
Using toContainText in Playwright
Playwright's toContainText method is a handy tool for asserting that multiple elements contain the same text. It checks if a locator points to an element or elements that contain the specified text.
Creating a Locator
First, create a locator for the elements you want to assert. If you have a list of items with <li> tags inside a <ul> element, create a locator like this:
const locator = page.locator('ul > li');Using toContainText
Next, use the toContainText method on the locator and pass in an array of expected texts. The method checks if any of the elements matched by the locator contain any of the expected texts.
await expect(locator).toContainText(['Text 1', 'Text 2', 'Text 3']);In this example, we're asserting that all three texts ('Text 1', 'Text 2', and 'Text 3') are present in some order within the matched elements.
Using Regular Expressions
You can also use regular expressions as expected values. For example:
await expect(locator).toContainText([/text \d/i]);Here, we're using a regular expression /text \d/i which matches any text containing "text" followed by a digit (case-insensitive).
By using toContainText with locators and arrays of expected texts or regular expressions, you can easily assert that multiple elements contain specific text without specifying their exact number or order.
Related Discord Threads
- How to do assertions in the page context when using Playwright library?recalcitrantmonk asked on · 11 messages · resolved
- Best Approach to only click button?everythingeasy asked on · 1 messages · resolved
- Had clip option been removed from the .havescreenshot() method?bronzebeardua asked on · 4 messages · resolved
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.