web-dev-qa-db-ja.com

要素の幅がサイプレスのピクセルサイズ以下かどうかを確認するにはどうすればよいですか？

私の目標は、要素の幅が355px以下かどうかをチェックするテストをサイプレスで書くことです。

私はこのコードを持っていますが、正確な寸法をチェックするだけです：

cy
.get('.mat-dialog-container:visible')
.should('have.css', 'width', '355px')
cypress
4
DauleDK

自動化できるものはすべて（そうすることの期待される実用性が実装と保守のコストを上回らない限り もちろん ）でなければならないので、RDテストの自動化は良いアイデアだと思います。コンテナの寸法を確認することがそれを達成する方法であるかどうかは未解決の問題です（非表示にする必要がある要素、非表示にする必要があるかどうか、および表示する必要がある要素を確認する必要があるか、UIが期待される）。

悲しいかな、これがあなたが望むものを達成する方法です。

JQueryの outerWidth を使用します。これは、width（paddingまたはborder）：

cy.get(selector).invoke('outerWidth').should('be.lt', 355);

実際に計算されたcss値をアサートしたい場合は、jQuery css ヘルパーを実際に使用できます（または window.getComputedStyle 、それは本当に問題ではありません）：

cy.get(selector).invoke('css', 'width')
    .then(str => parseInt(str)).should('be.lt', 355);

// or use jQuery.prototype.width (I'm not sure if there's any meaningful
//  difference, but there might be --- better check the docs)
cy.get(selector).invoke('width').should('be.lt', 355');
1
dwelle