Cypress testing pseudo CSS class :before

Question

Is there a way in which I can test the content of the pseudo CSS class for :before on my element with Cypress?

I have seen links documenting:

Answer 1

Based on Zach's answer I created a command that returns the pseudo-element property (without single quotes around).

function unquote(str) {
    return str.replace(/(^")|("$)/g, '');
}

Cypress.Commands.add(
    'before',
    {
        prevSubject: 'element',
    },
    (el, property) => {
        const win = el[0].ownerDocument.defaultView;
        const before = win.getComputedStyle(el[0], 'before');
        return unquote(before.getPropertyValue(property));
    },
);

You will use it like this

it('color is black', () => {
    cy.get('button')
       .before('color')
       .should('eq', 'rgb(0,0,0)'); // Or .then()
});