Cypress Visual Testing

Title

Tags

testtestingtooling

Aliases

Cypress Visual Testing

Created

last year

Updated

last year

Cypress는 functional 테스트 러너다. 즉, 웹 애플리케이션이 유저가 기대한대로 기능적으로 동작하는지 테스트하는 도구다.
- 문구 노출
- 요소 제거
- 유저 액션 이후에 CSS 클래스 추가
Cypress는 페이지가 실제로 어떻게 보이는지는 관여하지 않는다. (비주얼 테스트)
- 물론, 기술적으로 CSS 속성을 가지고 있는지를 have.css assertion 으로 테스트할 수 있지만, 이는 금방 복잡해지고, 유지보수하기 어려워진다.
- 비주얼 테스트는 CSS 이상에 의존할 수 있다.
  - SVG, 이미지 또는 canvas에 어떤 모양이 올바르게 그려졌는지
다행히 Cypress는 플러그인을 통해 비주얼 테스트를 할 수 있다.
- 특정 요소를 테스트한 다음 이미지를 이전에 승인된 이미지와 비교한다.
- 이미지가 동일한 경우 (설정된 픽셀 허용 오차 내에서)
Cypress 비주얼 테스팅을 위한 플러그인
테스트에서 스토리 가져오기
- Import stories in tests (storybook.js.org)

// /cypress/integration/Login.spec.js

/// <reference types="cypress" />

describe('Login Form', () => {
	it('Should contain valid login information', () => {
		cy.visit('/iframe.html?id=components-login-form--example');
		cy.get('#login-form').within(() => {
			cy.log('**enter the email**');
			cy.get('#email').should('have.value', 'email@provider.com');
			cy.log('**enter password**');
			cy.get('#password').should('have.value', 'a-random-password');
		});
	});
});

// /cypress/integration/Login.spec.js

/// <reference types="cypress" />

describe('Login Form', () => {
	it('Should contain valid login information', () => {
		cy.visit('/iframe.html?id=components-login-form--example');
		cy.get('#login-form').within(() => {
			cy.log('**enter the email**');
			cy.get('#email').should('have.value', 'email@provider.com');
			cy.log('**enter password**');
			cy.get('#password').should('have.value', 'a-random-password');
		});
	});
});

Cypress Visual Testing

References #

References