Protractor를 사용하여 요소의 CSS 속성을 테스트하는 방법은 무엇입니까?

CSS 속성을 테스트하는 것은 웹 애플리케이션의 품질을 보장하는 데 중요합니다. CSS 속성은 글꼴 크기, 색상, 레이아웃 등 요소가 웹 페이지에 표시되는 방식을 결정합니다. CSS 속성을 테스트하면 오류를 감지하고 애플리케이션이 예상대로 보이고 작동하는지 확인하는 데 도움이 됩니다. Protractor라는 도구는 개발자에게 CSS 속성을 테스트하는 다양한 방법을 제공합니다.

Protractor는 WebDriver를 사용하여 웹 애플리케이션과 브라우저 간의 상호 작용을 자동화하는 인기 있는 엔드투엔드 테스트 프레임워크입니다. Angular 애플리케이션을 테스트하는 데 널리 사용되지만 다른 웹 애플리케이션을 테스트하는 데에도 사용할 수 있습니다.

이 글에서는 Protractor를 사용하여 요소의 CSS 속성을 테스트하는 방법을 알아봅니다. 테스트 작업을 수행하는 다양한 방법을 배우게 됩니다.

Protractor를 사용하여 요소의 CSS 속성을 테스트하는 데 필요한 단계

각도기를 사용하여 요소의 CSS 속성을 테스트하려면 다음 단계가 필요합니다.

1단계: 각도기 설정

분도기를 사용하려면 필요한 종속성과 함께 각도기가 시스템에 설치되어 있는지 확인하세요.

• 분도기 설치 -

으아아아

• 바이너리 업데이트 -

으아아아

• 실행중인 서버 -

으아아아

2단계: Conf.js 파일 만들기

Protractor 프로젝트의 conf.js 파일은 Protractor 테스트 모음에 대한 다양한 설정과 옵션이 포함된 구성 파일입니다. conf.js라는 파일을 만들어 보겠습니다

으아아아

3단계: 테스트 사양 생성

Protractor를 설정한 후 test.js 등 원하는 이름으로 새 테스트 사양 파일을 만듭니다. Protractor 프로젝트의 specs 디렉터리에 새 파일을 만들 수 있습니다.

으아아아

위 코드에서는 test-class 클래스를 사용하여 요소의 색상 속성을 테스트합니다. 색상 속성은 rgba(53, 163, 59, 0.2)로 평가될 것으로 예상됩니다.

4단계: 테스트 요소가 포함된 HTML 파일 만들기

으아아아

5단계: 테스트 실행

테스트를 실행하려면 터미널에서 다음 명령을 사용하세요.

으아아아

위 명령에서 conf.js는 Protractor 프로젝트의 구성 파일이고 --suite css-property는 css-property 제품군의 테스트만 실행하도록 지정합니다.

테스트를 실행한 후 터미널에서 테스트 결과를 확인할 수 있습니다. 테스트에 통과하면 이런 메시지가 뜹니다 -

요소의 CSS 속성 테스트

✓ 올바른 색상이 있어야 합니다

1개 사양, 0개 실패

Protractor를 사용하여 CSS 속성을 테스트하는 다양한 방법

방법 1: GetCssValue() 메서드를 사용하세요

Protractor에서 제공하는 첫 번째 메소드는 요소의 CSS 속성의 계산된 값을 가져오는 데 사용되는 getCssValue() 메소드입니다. 이 메서드는 CSS 속성의 이름을 매개변수로 사용하고 계산된 값을 반환합니다. 구문과 예는 다음과 같습니다. -

문법

다음은 Protractor의 getCssValue() 메서드를 사용하여 CSS 속성을 테스트하기 위한 구문입니다.

으아아아

예

주어진 예에서는 클래스 테스트 클래스를 사용하여 요소의 색상 속성을 테스트하고 있습니다. 색상 속성의 예상 계산 값은 rgba(53, 163, 59, 0.2)입니다.

으아아아

방법 2: GetAttribute() 메서드 사용

요소의 CSS 속성을 테스트하는 두 번째 방법은 getAttribute() 메서드를 사용하여 요소의 스타일 속성 값을 가져오는 것입니다. 스타일 속성에는 요소에 적용된 인라인 스타일이 포함됩니다. 구문과 예는 다음과 같습니다. -

문법

다음은 Protractor의 getAttribute() 메서드를 사용하여 CSS 속성을 테스트하기 위한 구문입니다.

으아아아

예

주어진 예에서는 test-class 클래스 요소의 스타일 속성에 CSS 속성 color: green;

이 포함되어 있는지 테스트하고 있습니다. 으아아아

방법 3: Browser.executeScript() 메서드 사용

CSS 속성을 테스트하는 데 사용할 수 있는 세 번째 방법은 browser.executeScript() 메서드로, 브라우저 컨텍스트에서 JavaScript 코드를 실행하고 CSS 속성의 계산된 값을 가져옵니다. 구문과 예는 다음과 같습니다. -

문법

다음은 Protractor의 browser.executeScript() 메서드를 사용하여 CSS 속성을 테스트하기 위한 구문입니다.

으아아아

예

주어진 예에서는 브라우저 컨텍스트에서 JavaScript 코드를 실행하여 테스트 클래스가 있는 요소의 색상 속성에 대한 계산된 값을 가져옵니다. 여기서는 window.getCompulatedStyle() 메서드를 사용하여 요소의 계산된 스타일을 가져오고, getPropertyValue() 메서드를 사용하여 색상 속성 값을 가져옵니다.

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 应用程序功能的所有方面，包括视觉外观。

위 내용은 Protractor를 사용하여 요소의 CSS 속성을 테스트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!