Check Items For Duplicates

Advent day 18: Detect text and attribute duplicates

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.

Find and report duplicate text values

If there are any duplicate text items in the list, the error message is nice and clear.

Error when duplicate items are detected

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

Find and report duplicate attribute values

Just for fun, we can use cypress-should-really utilities to make the above test more functional and point-free:

Create should callback on the fly using helpers from cypress-data-session

Read the blog post “Check Items For Duplicates” for the full source code, explanation, and an amazing Stephen Curry joke.