Cypress vs Playwright Advent Calendar Day 14

Checking the text of multiple elements

Yesterday we confirmed that if we start with N “todo” items and delete 1, the N-1 “todo” items remain. Let’s be more precise and confirm which items remain.

Playwright assertion toHaveText

Playwright has a very nice and powerful assertion toHaveText that verifies the text content of multiple elements at once

import { test, expect } from ‘@playwright/test’
import todos from ‘../fixtures/3-todos.json’

test.describe(’TodoMVC’, () => {
  test.beforeEach(async ({ request }) => {
    await request.post(’/reset’, { data: { todos } })
  })

  test(’delete a todo’, async ({ page }) => {
    const items = page.locator(’.todo-list li’)
    await page.goto(’/’)
    // for clarity, use explicit list of strings
    await expect(items).toHaveText([
      ‘Write code’,
      ‘Write tests’,
      ‘Make tests pass’,
    ])

    await items.first().hover()
    await items.first().locator(’.destroy’).click()
    // the first item is gone
    await expect(items).toHaveText([’Write tests’, ‘Make tests pass’])
  })
})

Checking the remaining todos to have the correct text

Check the toHaveText assertion documentation; it can check the exact text match or use an array of regular expressions.

Cypress cy.contains command

Cypress does not have a built-in assertion for checking the text of multiple elements. It does have an assertion to check individual elements (should have text) and a query command to find an element using a combination of a selector and text (the cy.contains command).

Luckily, it is easy to include a Chai library or even add a custom assertion when necessary. My plugin cypress-map includes a “should read” assertion that mimics the Playwright’s toHaveText assertion. The same test can be expressed in Cypress like this:

import todos from ‘../../fixtures/3-todos.json’
import ‘cypress-real-events’
import ‘cypress-map’

describe(’TodoMVC’, () => {
  beforeEach(() => {
    cy.request(’POST’, ‘/reset’, { todos })
  })

  it(’deletes a todo’, () => {
    const items = ‘.todo-list li’
    cy.visit(’/’)
    cy.get(items)
      .should(’read’, [’Write code’, ‘Write tests’, ‘Make tests pass’])
      .first()
      .realHover()
      .find(’.destroy’)
      .click()
    cy.get(items).should(’read’, [’Write tests’, ‘Make tests pass’])
  })
})

This is how it looks in Cypress UI when running

Checking the text of 3 “todo” items before and after deleting the first item

For more examples of checking text content in Cypress, check out my “Cypress Examples” site.

This advent calendar is based on my online course “Cypress vs Playwright“ and open-source workshop bahmutov/cypress-workshop-cy-vs-pw. You can find links to the previous advent calendar days in my blog post “Cypress vs Playwright Advent Calendar 2025“.