web-dev-qa-db-ja.com

Cypressコマンドを使用して `display`のようなCSSプロパティを設定する方法はありますか？

表示プロパティを設定して要素を非表示にしたい。

invokeを使用して属性値を設定しようとしましたが、HTML属性でしか機能しない可能性がありますか？

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

これは属性値を設定しているようですが、要素はまだ表示されているため、おそらく属性を認識していないか、間違ったコマンドを使用していると思います。

提案されているようにこれを使用してみました：

enter image description here

.css（）関数は、本来の方法で値を設定していないようです：

enter image description here

セレクターが正しく、表示がnoneであることを自分自身の妥当性を検証する私がここにいますlol： enter image description here

javascriptjqueryhtmlcsscypress
8
jameseg

これはうまくいくようです。 _initial !important_は実際の値ではなく、ある種の参照であると私は信じています。おそらく、それが.css()が機能しない理由です。

_Cypress.Commands.add('hideHubSpot', () => {
    cy.get('#hubspot-messages-iframe-container')
        .invoke('attr', 'style', 'display: none')
        .should('have.attr', 'style', 'display: none')
_
5
jameseg

CSSを変更するには、cssを使用して invoke関数をjQueryから で呼び出すことができます。 !importantは機能しませんが、JavaScriptを介してCSSを設定するとアイテムの他のスタイルがオーバーライドされるため、必要ありません。

次に、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')
2
Zach Bloomquist

それがあなたの求めるCSSであるなら、あなたはおそらく属性の代わりにスタイルを使うべきです。

ヒノキがどのように機能するかはわかりませんが、これは次のようなものだと思います。

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

これは、ディスプレイが属性ではないため、スタイル属性内にある必要があるCSSプロパティです。

これが機能しない場合、おそらく次のようなものがあります：

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