分度器を使用して要素の CSS プロパティをテストするにはどうすればよいですか?-CSSチュートリアル-php.cn

分度器を使用して要素の CSS プロパティをテストするにはどうすればよいですか?

王林

リリース： 2023-08-27 10:37:02

転載

1070 人が閲覧しました

如何使用 Protractor 测试元素的 CSS 属性？

CSS プロパティのテストは、Web アプリケーションの品質を確保するために重要です。 CSS プロパティは、フォントサイズ、色、レイアウトなどの要素が Web ページ上でどのように表示されるかを決定します。 CSS プロパティをテストすると、エラーを検出し、アプリケーションが期待どおりに表示され、機能することを確認できます。 Protractor と呼ばれるツールは、開発者に CSS プロパティをテストするさまざまな方法を提供します。

Protractor は、WebDriver を使用して Web アプリケーションとブラウザー間の対話を自動化する、人気のあるエンドツーエンドのテストフレームワークです。これは Angular アプリケーションのテストに広く使用されていますが、他の Web アプリケーションのテストにも使用できます。

この記事では、分度器を使用して要素の CSS プロパティをテストする方法を学びます。テスト操作を実行するさまざまな方法を学びます。

分度器を使用して要素の CSS プロパティをテストするために必要な手順

分度器を使用して要素の CSS プロパティをテストするには、次の手順が必要です。

ステップ 1: 分度器をセットアップする

Protractor を使用するには、それが必要な依存関係とともにシステムにインストールされていることを確認してください。

分度器をインストールする -

リーリー

バイナリを更新する -

リーリー

サーバーを実行します -

リーリー

ステップ 2: Conf.js ファイルを作成する

Protractor プロジェクトの conf.js ファイルは、Protractor テストスイートのさまざまな設定とオプションを含む構成ファイルです。 conf.js

というファイルを作成しましょう。リーリー

ステップ 3: テスト仕様を作成する

分度器を設定した後、test.js などの任意の名前で新しいテスト仕様ファイルを作成します。 Protractor プロジェクトの spec ディレクトリに新しいファイルを作成できます。

リーリー

上記のコードでは、クラス test-class を使用して要素の color 属性をテストします。 color 属性が rgba(53, 163, 59, 0.2) に評価されることが期待されます。

ステップ 4: テスト要素を含む HTML ファイルを作成する

リーリー

ステップ 5: テストを実行する

テストを実行するには、ターミナルで次のコマンドを使用します -

リーリー

上記のコマンドでは、conf.js は Protractor プロジェクトの構成ファイルであり、--suite css-property は、css-property スイート内のテストのみを実行することを指定します。

テストの実行後、ターミナルでテスト結果を表示できます。テストに合格すると、次のようなメッセージが表示されます -

要素の CSS プロパティをテストする

✓ 正しい色である必要があります

1 仕様、0 障害

分度器を使用して CSS プロパティをテストするさまざまな方法

方法 1: GetCssValue() メソッドを使用する

Protractor によって提供される最初のメソッドは getCssValue() メソッドで、要素の CSS プロパティの計算値を取得するために使用されます。このメソッドは、CSS プロパティの名前をパラメータとして受け取り、その計算値を返します。構文と例は次のとおりです -

＃＃＃文法＃＃＃

以下は、Protractor の getCssValue() メソッドを使用して CSS プロパティをテストするための構文です。

リーリー＃＃＃例＃＃＃

与えられた例では、クラス test クラスを使用して要素の color 属性をテストします。 color プロパティの予想される計算値は rgba(53, 163, 59, 0.2) です。

リーリー

方法 2: GetAttribute() メソッドを使用する

要素の CSS 属性をテストする 2 番目の方法は、getAttribute() メソッドを使用して要素の style 属性の値を取得することです。 style 属性には、要素に適用されるインラインスタイルが含まれます。構文と例は次のとおりです -

＃＃＃文法＃＃＃

以下は、Protractor の getAttribute() メソッドを使用して CSS 属性をテストするための構文です。

リーリー＃＃＃例＃＃＃

指定された例では、クラス test-class の要素の style 属性に CSS プロパティ color: green;

が含まれるかどうかをテストしています。リーリー

方法 3: Browser.executeScript() メソッドを使用する

CSS プロパティのテストに使用できる 3 番目のメソッドは、browser.executeScript() メソッドです。このメソッドは、ブラウザコンテキストで JavaScript コードを実行し、CSS プロパティの計算値を取得します。構文と例は次のとおりです -

＃＃＃文法＃＃＃

以下は、Protractor の browser.executeScript() メソッドを使用して CSS プロパティをテストするための構文です。

リーリー＃＃＃例＃＃＃

指定された例では、ブラウザコンテキストで JavaScript コードを実行して、テストクラス class を持つ要素の color 属性の計算値を取得します。ここでは、window.getCompulatedStyle() メソッドを使用して要素の計算されたスタイルを取得し、getPropertyValue() メソッドを使用して color プロパティの値を取得します。

describe('Test CSS property of an element using browser.executeScript()', () => {
   it('should have the correct color', () => {
      browser.get('https://example.com');
      const element = element(by.css('.test-class'));
      browser.executeScript('return window.getComputedStyle(arguments[0]).color;', element).then(function(value) {
         expect(value).toEqual('rgba(53, 163, 59, 0.2)');
      });
   });
});

ログイン後にコピー

结论

测试元素的 CSS 属性是确保应用程序具有视觉吸引力和功能性的重要步骤。一个非常重要的工具 Protractor 用于以有效的方式执行此类测试，以测试使用 getCssValue() 和 getAttribute() 方法的元素的 CSS 属性。在本文中，我们了解了进行测试的完整步骤，现在如果您已按照本文中概述的步骤进行操作，则可以轻松设置 Protractor 并创建测试规范来测试元素的 CSS 属性。事实证明，使用 Protractor 测试 Web 应用程序（包括 Angular 应用程序）是可靠且高效的。有了这些知识，我们就可以编写有效的端到端测试，涵盖 Web 应用程序功能的所有方面，包括视觉外观。

以上が分度器を使用して要素の CSS プロパティをテストするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。