Testing color property always yields `rgb()` value, even when stored as hex

Firstly, I ❤️ Cypress. Thank you so much for all of y’alls work.

Current behavior:

I have a quick test to ensure that some branding is working within a component:

cy.get('[data-testid="StepsCard"]')
  .find('h2')
  .should('have.css', 'color').and('equal', '#663399');

This is what the property looks like in the Cypress Test Runner’s browser’s dev tools:

The test fails with the following error:

I’ve also seen others complain about this behavior: https://gitter.im/cypress-io/cypress?at=5b4da9d88fe2780689bc20e7

Desired behavior:

Test passes when running yarn cypress:open, since the <h2> element within the StepsCard component does indeed have a color of #663399.

Steps to reproduce:

I’ll reproduce if absolutely necessary. I’m curious to know if perhaps this may be unavoidable. I understand y’all are very busy - feel free to close this issue if it isn’t up to the necessary standard 👍

Versions

• macOS High Sierra v0.13.6
• Chrome v67.0.3396.99
• Cypress v3.0.1
• React v16.4.1

[NicholasBoll]

Perhaps try the following: https://gist.github.com/NicholasBoll/e584991b36986a85acf0e95101752bc0

The gist has the following JS to add to your cypress/support/commands.js file:

const compareColor = (color, property) => (targetElement) => {
    const tempElement = document.createElement('div');
    tempElement.style.color = color;
    tempElement.style.display = 'none'; // make sure it doesn't actually render
    document.body.appendChild(tempElement); // append so that `getComputedStyle` actually works
  
    const tempColor = getComputedStyle(tempElement).color;
    const targetColor = getComputedStyle(targetElement[0])[property];
  
    document.body.removeChild(tempElement); // remove it because we're done with it
  
    expect(tempColor).to.equal(targetColor);
};

Cypress.Commands.overwrite('should', (originalFn, subject, expectation, ...args) => {
    const customMatchers = {
        'have.backgroundColor': compareColor(args[0], 'backgroundColor'),
        'have.color': compareColor(args[0], 'color'),
    };
  
    // See if the expectation is a string and if it is a member of Jest's expect
    if (typeof expectation === 'string' && customMatchers[expectation]) {
        return originalFn(subject, customMatchers[expectation]);
    }
    return originalFn(subject, expectation, ...args);
});

You’ll then be able to do things like:

cy.get('button').should('have.color', 'black')
cy.get('button').should('have.color', '#000000')
cy.get('button').should('have.color', 'rgba(0, 0, 0)')

cy.get('button').should('have.backgroundColor', '#cccccc')

It works by using getComputedStyle on both the subject element and creates a temp element to get the computed color and compares. The assertion output could be better, but perhaps that’s an assertion plugin?

[kylemh]

Cool. I figured it had something to do with that old jQuery issue…

I - personally - would love to see that accepted as a core feature.

Curious to see how others feel.