Discover more from Cypress Testing Tips & Tricks
Can your test detect the duplicate text “Oranges” in the following HTML snippet?
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
You certainly can - the challenge is how to report the duplicate text in the assertion so by looking at the screenshot you can immediately say “It was 🍊” Here is my initial solution - I am using some of Lodash functions bundled with Cypress.
If there are any duplicate text items in the list, the error message is nice and clear.
What about element attributes? How can we detect duplicate product id attribute in the following HTML?
<ul>
<li data-product-id="a11">Apples</li>
<li data-product-id="b20">Oranges</li>
<li data-product-id="a11">Bananas</li>
</ul>
We can write a test to detect the duplicate “a11” value
Just for fun, we can use cypress-should-really utilities to make the above test more functional and point-free:
Read the blog post “Check Items For Duplicates” for the full source code, explanation, and an amazing Stephen Curry joke.
Subscribe to Cypress Testing Tips & Tricks
Tips and tricks about testing all the web things using Cypress.io