Есть ли способ установить свойства CSS, такие как `display`, с помощью команд Cypress?

Question

Я бы хотел скрыть элемент, установив свойство display.

Я пытался использовать invoke для установки значения атрибута, но он может работать только для атрибутов HTML?

cy.get('#hubspot-messages-iframe-container > iframe')
        .invoke('attr', 'display', 'none!important')
        .should('have.attr', 'display', 'none!important')

Кажется, это установка значений атрибута, но элемент все еще виден, что наводит меня на мысль, что он, вероятно, не распознает мой атрибут, или я использую неправильную команду.

Попробовал использовать это как предложено:

Функция .css (), похоже, не устанавливает значение так, как должно:

Вот я проверяю, что мой выбор верен, а на дисплее отображается none lol:

Answer 1

Вы можете вызвать функцию css из jQuery , используя invoke для изменения CSS. Обратите внимание, что ваш !important не будет работать, но вам это не нужно, поскольку настройка CSS с помощью Javascript переопределит любые другие стили элемента.

Тогда вы можете просто использовать have.css утверждение из списка утверждений , чтобы проверить, если вам нужно.

Вот как это будет выглядеть:

cy.get('#hubspot-messages-iframe-container > iframe')
  // use the .css function from jquery, since Cypress yields jquery elements
  .invoke('css', 'display', 'none')
  .should('have.css', 'display', 'none')

Answer 2

Кажется, это работает, ребята. Я считаю, что initial !important является некоторой ссылкой, а не фактическим значением, и, возможно, именно поэтому .css() не будет работать.

Answer 3

Если вам нужен CSS, вам, вероятно, следует использовать стиль вместо атрибута.

Я не уверен, как работает кипарис, но я могу догадаться, что-то вроде этого:

cy.get('#hubspot-messages-iframe-container > iframe')
.invoke('style', 'display', 'none! important')
.should('have.style', 'display', 'none !important')

Это потому, что display не является атрибутом, это свойство CSS, которое должно быть внутри атрибута стиля.

В случае, если это не сработает, возможно, что-то вроде этого может:

cy.get('#hubspot-messages-iframe-container > iframe')
.invoke('attr', 'style', 'display: none! important')
.should('have.attr', 'style', 'display: none !important')