[Cypress] Remove New Lines From String

I’m working on a UK Government project at the moment that has a lot of Cypress tests. The way they are set up is not exactly to my taste, but I mention it because it is relevant to the way the code will be structured below. However, the method I use to remove lines from strings in Cypress doesn’t change too much regardless.

OK, so the problem is basically this:

cy.get('your-element-selector')
    .should('contain.text', 'some text you want to find');Code language: JavaScript (javascript)

But when Cypress runs the test, it fails because the actual text in the HTML is more like this:

'       some text\n you want to \nfind           'Code language: JavaScript (javascript)

And you might think that’s nonsense, but because of HTML reformatters and such like, it is pretty common longer strings. At least, it has bitten me on multiple projects.

Removing Line Breaks In Cypress Tests

Cypress has had the ability to remove leading and trailing spaces in their assertions since as far back as version 4.0.0.

So if all you have to worry about is text like this:

'       some text you want to find           'Code language: JavaScript (javascript)

Then you should have no problem.

This problem specifically comes in when the text has line break characters added in the HTML – those pesky \n characters.

One way to address this is with a regex match directly in your assertion:

  cy.get('your-element-selector')
    .invoke('text')
    .then(text => {
      expect(text.replace(/\n/g, ' ').replace(/\s+/g, ' ').trim())
        .to.contains('some text you want to find')
    })Code language: JavaScript (javascript)

And this will work, and is most of the solution.

But if you have multiple places that you need to do this – and I frequently do – then we really do need to go one step further and extract out the regex replace into a helper function.

Creating A Helper Function

How you set this up is up to you and your project. There may be an existing place with common / shared test code.

In my case this code lives in a file under the integration-test/support/helpers directory.

In there, amongst other things I add this:

function cleanString(rawText) {
  return rawText.replace(/\n/g, ' ').replace(/\s+/g, ' ').trim()
}

module.exports = {
  // ... other stuff
  cleanString,
}Code language: JavaScript (javascript)

As you can see, it’s not a TypeScript project 🙁

Refactoring The Test(s)

With the helper function created, it’s now a case of importing the cleanString function into as many tests as needed, and calling the function in the assertion:

const { cleanString } = require('../../support/helpers')

  it('should be a nicer test now', () => {

    cy.get('your-element-selector')
      .invoke('text')
      .then(text => {
        expect(cleanString(text)).to.contains('some text you want to find')
      })Code language: JavaScript (javascript)

And that’s it.

A slightly improved test setup to remove new lines from strings when testing in Cypress.