Cypress error The chainer colored was not found. Could not build assertion

user_2761641 0
Viewed 83

Below is my code, when I use this cypress test, I am getting the error Cypress error The chainer colored was not found. Could not build assertion.

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

const toasts = [
  { _id: '1', message: 'success toast notification', type: 'success' },
  { _id: '2', message: '2 success toast notification', type: 'error' },
  { _id: '3', message: 'error toast notification', type: 'error' },
];
describe('Toast.cy.tsx', () => {
  it('Toast component renders toasts properly', () => {
    themedMount(<Toast toasts={toasts} />);
    toasts.forEach((t) => {
      const toastElement = cy.contains(t.message);
      toastElement
        .should('have.css', 'background-color')
        .and('be.colored', '#fbcfc8');
    });
  });
});
chai cypress assertion
1 Answers

Cypress modifies chai to use it in the .should() and .and() commands.

If you import chai and apply chaiColors to that instance, it will not be available in the Cypress commands.

Remove import chai from 'chai' and it should work.

import chaiColors from 'chai-colors';
chai.use(chaiColors);                   // apply plugin to the global chai

Use onecolor instead

Please also see my note here Test color with chai-colors plugin about flaky color assertions due to rgb and rgba differences.

Importing and directly using the onecolor library is a better idea because it has conversion methods you can apply.

user_169977070
Related