trying Cypress for E2E testing and color problem

Cypress - different approach to E2E testing?

I haven't been doing E2E tests in a while. But when I did, it felt a little bit awkward. All this weird shit going on, and you had to use some weirdness called Selenium. And writing itself was a big "meh".

So I forgot about E2E testing. I threw it throughout the window. For a long time I tested GUI manually or ocasionally wrote unit tests (but unit testing GUI is problematic at best).

Lately though I see more and more people mentioning E2E testing tool called Cypress. And it seems that it's more frontend friendly, it's not based on Selenium, so no more miss Java.. And they promise that it's "all in one" kind of solution.

So I decided to try it and write about it. So...

Install

npm install cypress --save-dev

(According to docs you'd need Node.js 10 or 12 and above to use Cypress).

It creates a folder cypress in your project directory. So go to it and write some tests:

file: cypress/integration/someFile.js:

assuming that our website has something like this inside:

<div style="color: red">Hello World</div>

Start server

Code above assumes that our website will be available at given adress we pass to cy.visit. So we need to start server. I've created my app with create-react-app so I do npm start.

Run

npx cypress open

Cypress Electron app will appear.

As you can see, there are some example tests. But we don't need them for now. Let's collapse them and click our someFile.js test.

WTF colors

We have error: expected <div> to have CSS property color with the value red, but the value was rgb(255, 0, 0)

Weird thing happened. Cypress doesn't seem to understand colors. That red is red. So should we compare colors by RGB values?

cy.contains('Hello').should('have.css', 'color', 'rgb(255,0,0)');

Also not really.

Timed out retrying: expected '<div>' to have CSS property 'color' with the value 'rgb(255,0,0)', but the value was 'rgb(255, 0, 0)'

This comparison seems to be based on strings (notice I didn't write spaces after commas). After adding spaces rgb(255, 0, 0) it worked:

Yay! Tests passed. In nice green color we see expected <div> to have CSS property color with the value rgb(255, 0, 0) message! How cool's that?

But seriously... this is weird.

Official Cypress blog gives us the advice that we can use chai-colors assertion library for color based comparisons. Docs don't say how to add this library, though I've found this issue on GitHub.

use chai-colors

npm install -save-dev chai-colors

And then let's write on the beginning of our file:

import chaiColors from 'chai-colors';
chai.use(chaiColors);

And then let's change our assertion to:

cy.contains('Hello').should('have.css', 'color').and('be.colored', 'red');

running again:

And green color again! expected #ff0000 to be the same color as #ff0000 :) Much success, wow.

trivia

Using Cypress I cannot help but think about awesome rap band called Cypress Hill. I was listening to it when writing: Cypress Hill - Lowrider (Official Music Video)