QE 자동화 엔지니어로서 일반적으로 UI 구축 및 API 자동화 테스트를 포함합니다.여러 해 동안 나는 많은 언어, 도구, 프레임워크를 사용하여 이 일을 완성했다.
UI 테스트의 경우 저는 보통 Selenium 자동화 브라우저를 통한 프레임워크를 사용하고 자바, 자바스크립트, 루비, c# 등의 언어를 사용합니다.
API에 대해 저는 보통 자바스크립트를 사용하는 우체부와 자바를 사용하는 안심이나 공수도에 주목합니다.
이 모든 프레임워크와 언어를 사용할 수 있는 데는 많은 시간과 경험이 필요하며, 단일 프로젝트에서도 QE 자원은 UI와 API 테스트를 처리하는 데 많은 기술이 필요하다.
그래, 그럼 이게 Cypress랑 무슨 상관이야?

측백나무

Cypress는 현대 JavaScript 프레임워크를 이용한 웹 응용 프로그램을 테스트하는 데 일반적으로 사용되는 JavaScript 기반 오픈 소스 테스트 자동화 프레임워크입니다.
다음과 같은 몇 가지 주요 사항이 있습니다.

Cypress는 UI와 API 테스트를 구축할 수 있도록 해 줍니다. 이로써 QE 엔지니어들은 일련의 도구를 배우지 않고 훌륭한 테스트를 구축하는 데 더 많은 관심을 기울일 수 있습니다.

Cypress는 셀렌을 사용하지 않습니다.Cypress를 설치할 때 시작에 필요한 모든 것을 설치하고 있습니다.

나는 최근에 측백나무에 관한 이야기를 많이 들었다.저는 이 방면에 아무런 실제 경험이 없기 때문에 이 일련의 게시물은 제 학습 과정을 기록하고 다른 사람들을 도와주길 바랍니다.
우리 시작합시다!

설치하다.

테스트 프로젝트를 위한 폴더를 만들고 프로젝트 폴더에서 실행합니다npm init.

npm init -y

Cypress 설치:

npm install cypress --save-dev

이제 Cypress Test Runner를 시작할 수 있습니다.

./node_modules/.bin/cypress open

Cypress가 시작되면 다음과 같은 상황을 볼 수 있습니다.

테스트 실행기를 시작하면 다음을 볼 수 있습니다.

네, 테스트 실행 프로그램을 처음 시작할 때, 프로젝트에 예시 테스트를 자동으로 추가합니다.이것은 VS 코드에서 항목을 열 때 보았습니다.

이 견본들을 시험해 봅시다!

테스트 개요

좋아하는 IDE 또는 테스트 편집기를 사용하여 location.spec.js 폴더의 파일integration/examples을 봅니다.
location/spec.js 익숙해 보였으면 좋겠어요.몇 가지 주요 사항:

모든 샘플 테스트는 Cypress 샘플 응용 프로그램https://example.cypress.io/에 접근합니다.샘플 테스트는 Cypress 기능의 전면적인 개술을 제공합니다. 테스트의 사이트는 Cypress doco를 포함하기 때문에 당신은 한 번의 테스트만으로 두 배의 학습 효과를 얻을 수 있습니다!

사용한 적이 있다면mocha과chai 테스트 규범은 익숙해 보일 것입니다.Cypress는 익숙한 자동화 문법을 이용하여 이러한 도구를 사용한 사람들에게 어느 정도 익숙함을 제공한다.

이 특정 테스트 규범은 3개의 테스트가 있는데 it() 키워드로 표시한다.

매번 테스트를 하기 전에 우리는 https://example.cypress.io/commands/location로 내비게이션을 했다.beforeach() 키워드에서 말한 바와 같다.

요컨대 이 세 가지 테스트는 https://example.cypress.io/commands/location로 이동하여 (1) URL 해시, (2) URL 위치, 그리고 (3) 현재 URL을 검증한다.
테스트를 시작합시다!

Cypress test Runner를 사용하여 테스트 실행

우리가 전에 시작한 사이프레스 테스트 주자로 돌아가자.이 테스트 규범을 실행하려면 examples 폴더를 펼치고 location.spec.js 찾은 다음 누르십시오.테스트를 시작합니다.
다음과 같이 새 브라우저 창을 열어야 합니다.

주의해야 할 몇 가지 일:

왼쪽 패널에 실행 중인 테스트가 표시됩니다.

오른쪽 판넬에 테스트 중인 프로그램이 표시됩니다.

왼쪽 상단을 따라 총 1.72초 동안 3개의 테스트가 실행되는 것을 볼 수 있다.

왼쪽 패널에서 테스트를 확장하여 자세한 내용을 확인할 수 있습니다.

여기서 가장 멋있는 일 중 하나는 테스트가 실행될 때 테스트된 프로그램과 테스트된 프로그램이 하나의 보기에 통합되는 것이다.
그렇다면 테스트 인원은 어떻게 우리의 테스트를 알았을까?이것은 테스트 운영자가 우리의 프로젝트를 지속적으로 감시하고 상황이 변할 때 즉시 규범 목록을 업데이트합니다.이 점을 이해하려면 examples 폴더에 빈 테스트 규범 파일을 계속 추가하십시오.이 파일이 테스트 실행 프로그램에 바로 나타나는 것을 볼 수 있습니다.

명령줄에서 테스트 실행

최종적으로, 우리는 이 테스트들이 CI 파이프에서 실행되기를 희망한다. 이것은 명령줄에서 헤드 없이 실행될 수 있어야 한다는 것을 의미한다.이것은 보통 내가 약간의 시간을 들여야만 모든 것이 정상적으로 작동할 수 있지만, Cypress를 사용하는 것은 매우 쉽다.이것 괜찮아요?

./node_modules/.bin/cypress run --spec cypress/integration/examples/location.spec.js

명령줄에서 세 개의 성공적인 테스트를 실행한 것을 보실 수 있습니다.

오, 그리고 보이는 브라우저를 시작하지 않았습니다.모든 테스트는 끝이 없다.

다음은요?

이 문장에서 우리는 단지 표면에 닿았을 뿐이다.요컨대, 우리는 Cypress를 설치하여 테스트의 문법을 검사했고, 테스트 실행 프로그램에서 테스트를 실행했으며, 명령줄에서 테스트를 실행했다.
앞으로의 게시물에는 API 테스트를 위해 Cypress를 사용하고 CI 파이프에 Cypress를 통합하고 보고하는 등 더 많은 내용을 소개하고 싶습니다.
미래의 게시물에 대해 궁금한 점이나 생각이 있으면 댓글로 알려주세요.
그 전에 계속 지켜봐 주세요!