Cypress-тестирование псевдо-CSS-класса: перед - PullRequest
Новая
       21

Cypress-тестирование псевдо-CSS-класса: перед

1 голос
/ 04 апреля 2019

Есть ли способ проверить content псевдокласса CSS для: before на моем элементе с Cypress?

Я видел документирование ссылок:

Но у меня естьничего не найдено для классов CSS, использующих псевдокласс ::before.

Представьте код: 

.myClass:before {
  content: "foo-";
}
<div>
  <span class="myClass">Bar</span>
</div>

Как можно проверить, присутствует ли 'foo-'?

Ответы [ 2 ]

2 голосов
/ 04 апреля 2019

Существует способ утверждать свойства CSS псевдоэлементов, хотя это не так просто, как просто использовать команду Cypress.

  1. Используйте cy.get(), чтобы получить ссылку на элемент.
  2. Считать объект Window с элемента, а затем вызвать Window.getComputedStyle(), который может считывать вычисленные CSS псевдоселекторов.
  3. Использовать getPropertyValue в возвращенном объявлении CSS для чтения значения свойства content.
  4. Утверждение на нем.

Вот пример, который работает с опубликованным кодомв ОП: 

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-"')
})
0 голосов
/ 04 апреля 2019

Попробуйте заявить на тексте родителя: 

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

Если это не сработает, возможно, вам придется использовать свойство textContent: 

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