Cypress testing pseudo CSS class :before

问题

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:

Accessing nth-child pseudo element
Accessing the actual content pseudo class of a normal CSS class

But I have not found anything for CSS classes using the ::before pseudo class.

Imagine the code:

.myClass:before {
  content: "foo-";
}

<div>
  <span class="myClass">Bar</span>
</div>

How could one test that 'foo-' is present?

回答1:

There's a way to assert on the CSS properties of pseudo-elements, although it's not as simple as just using a Cypress command.

Use cy.get() to get a reference to the element.
Read the Window object off of the element, and then invoke Window.getComputedStyle(), which can read the computed CSS of pseudo selectors.
Use getPropertyValue on the returned CSS declaration to read the value of the content property.
Assert on it.

Here's an example that works on the code posted in the OP:

cy.get('.myClass')
.then($els => {
  // get Window reference from element
  const win = $els[0].ownerDocument.defaultView
  // use getComputedStyle to read the pseudo selector
  const before = win.getComputedStyle($els[0], 'before')
  // read the value of the `content` CSS property
  const contentValue = before.getPropertyValue('content')
  // the returned value will have double quotes around it, but this is correct
  expect(contentValue).to.eq('"foo-"')
})

回答2:

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()
});

回答3:

Try asserting on the text of the parent:

cy.get('.myClass').parent().should('have.text', 'foo-bar')

If that doesn't work, you may have to use the textContent property:

cy.get('.myClass').parent(). should($el => expect ($el).to.contain('foo-bar')
)

回答4:

This was my solution to get, convert and compare a hexadecimal's background-color with a rgb returned.

const RGBToHex = (rgbColor) => {
  // it parse rgb(255, 13, 200) to #fa92D4
  const [red, green, blue] = rgbColor.replace(/[a-z]|\(|\)|\s/g, '').split(',');
  let r = parseInt(red, 10).toString(16);
  let g = parseInt(green, 10).toString(16);
  let b = parseInt(blue, 10).toString(16);

  if (r.length === 1) r = `0${r}`;
  if (g.length === 1) g = `0${g}`;
  if (b.length === 1) b = `0${b}`;

  return `#${r}${g}${b}`;
};


cy.get('.element').then(($el) => {
  const win = $el[0].ownerDocument.defaultView;
  const before = win.getComputedStyle($el[0], 'before');
  const bgColor = before.getPropertyValue('background-color');
  expect(RGBToHex(bgColor)).to.eq('#HEXA');
});

来源：https://stackoverflow.com/questions/55516990/cypress-testing-pseudo-css-class-before

标签

css

testing

integration-testing

cypress