I have completed the initial step by implementing my function (convert hex to rgb) in the commands.ts file.
export const hexToRgb = (hex: string) => {
let r = 0;
let g = 0;
let b = 0;
// Handling 3-digit hex color codes
if (hex.length === 4) {
r = parseInt(`${hex[1]}${hex[1]}`, 16);
g = parseInt(`${hex[2]}${hex[2]}`, 16);
b = parseInt(`${hex[3]}${hex[3]}`, 16);
// Handling 6-digit hex color codes
} else if (hex.length === 7) {
r = parseInt(hex.slice(1, 3), 16);
g = parseInt(hex.slice(3, 5), 16);
b = parseInt(hex.slice(5, 7), 16);
}
// Returning RGB value with spaces between values
return `rgb(${r}, ${g}, ${b})`;
};
Moving on to the next step,
import {
hexToRgb,
} from '../../support/commands';
it('Ensuring correct colors for elements', () => {
cy.get(byTestId('admin-roll-up-menu')).click();
cy.get(byTestId('link-to-companies')).click();
testLoadPage('select-company-btn-3', '/accountant/overview');
cy.wait('@authSwitchCompany').should(({ request }) => {
expect(request.body.companyId, 'companyId').to.eq(3);
});
defualControllerColorsLight();
cy.get(byTestId('overview-graph')).should(
'have.css',
'background-color',
hexToRgb('#ffffff'),
);
cy.get(byTestId('graph-title')).should(
'have.css',
'color',
hexToRgb('#292929'),
);
});
The expected result can be viewed here.