Cypress를 사용하여 보다 나은 자동화 테스트 작성

개발자 여러분과 테스트 인원들 안녕하십니까? 본고에서 Todo 응용 프로그램cypress의angular 프로젝트에서 자동 단말기 테스트를 작성하는 방법을 보여 드리겠습니다.우리는 e2e 테스트를 진행할 장면이 있을 것이다. 우리는 하나하나 소개할 것이다.본고는 모서리 부분이 아니라 측백나무 부분과 관련이 있을 수 있다.
그래서 만약에 테스트를 쓰고 싶다면, 이 리포를 복제해 주십시오. 저는angular Todo 응용 프로그램 프로젝트로 그것을 만들었고, 그 중에서cypress를 설정했습니다.이것은 환매 링크https://gitlab.com/mquanit/angular-items입니다.이것만 복제하면 측백나무를 즐길 준비가 되어 있다.
따라서 우리의 예시를 시작하기 전에 우선, 우리는 무엇이 무엇인지 알아야 한다Cypress.itofficial Website에 따라

Cypress is an automated end-to-end testing framework for writing automated tests

그러나 보호자, 카마, 모차 등 다른 테스트 도구가 많을 때 왜cypress를 사용해야 합니까?
Cypress는 각도 응용 프로그램의 각도기와 비슷하지만, Cypress는 실행 속도가 더 빠르고 디버깅하기 쉽다.Cypress는 응용 프로그램에 독립된 자동화 단말기부터 단말기까지 테스트를 할 수 있을 뿐만 아니라 모델 클래스, 서비스 클래스 등 방법에 대해 단원 테스트를 할 수 있다.Cypress는 브라우저에서 테스트를 자동으로 볼 수 있는 완전한 테스트 체험을 제공합니다.
Cypress는 로컬에서 테스트할 수 있는 자체 테스트 실행 프로그램을 제공합니다.Cypress는 시간 여행, 디버깅 가능, 실시간 다시 불러오기, 자동 대기 등 다른 멋진 기능도 제공합니다.이러한 뛰어난 기능은 이 도구를 남다르게 하여 우리는 그것들의 실제 응용을 볼 수 있을 것이다.
그만해. 만약 당신이 이 환매 협의를 복제했다면, 당신은 갈 수 있지만, 그렇지 않다면, 당신은 각도 항목이 있을 수도 있고, 의존항으로Cypress를 추가하기만 하면 된다.다음 명령을 사용하여 설치npm package cypress만 하면 됩니다.

npm i -D cypress

cypress 패키지는 데스크톱 프로그램과cypress 바이너리 파일을 포함합니다.패키지를 설치하려면 Cypress 바이너리 파일을 다운로드해야 하기 때문에 이 명령을 처음 실행하는 데 몇 분이 걸릴 수 있습니다.Cypress 바이너리 파일은 글로벌 캐시 디렉터리에 저장되기 때문에 같은 버전의 경우 앞으로 이 패키지를 설치하는 속도가 훨씬 빨라질 것입니다.
Cypress를 설치하면 cypress라는 폴더와 cypress.json라는 파일이 프로젝트의 루트 폴더에 추가됩니다.생성된cypressfolder는 우리가 테스트와cypress 생성 부품을 작성하는 곳이다.생성된 configuration file 측백나무.json은 빈 json 대상을 포함합니다.이 파일은 Cypress의 기본 동작을 설정하는 곳입니다.따라서 테스트를 작성하기 전에 설정을 좀 하겠습니다.cypress.json 파일에서 기본 구성에 다음 코드를 추가합니다.

{
  "baseUrl": "http://localhost:4200",
  "ignoreTestFiles": "**/examples/*",
  "viewportHeight": 760,
  "viewportWidth": 1080
}

말 그대로 baseUrl에 테스트를 쓸 것입니다. 이것은 localhost:4200 각도 항목에 사용됩니다.
프로젝트에 Cypress를 추가하면 프레젠테이션 테스트 파일이 포함된 examples 폴더를 제공하지만, 프로젝트에 기본적인 예시 테스트가 필요하지 않기 때문에 테스트 세트에서 제외합니다.
이것이 바로 우리의 설정이다.첫 번째 테스트를 위해 코드를 작성합시다.cypress 폴더 아래의 폴더 구조에서 integration 폴더를 볼 수 있으며, 테스트 세트에서 볼 수 있도록 모든 테스트를 작성할 것입니다.
첫 번째 테스트 파일DemoTest.spec.js을 만들고 이 파일에 다음 코드를 추가합니다.

describe("Our Todo App Test Suite", () => {
  it("Visiting our app", () => {
    cy.visit("/");
    cy.get(".nav-wrapper").contains("Items Manager");
  });
});

위의 코드에서 우리는 describe 함수를 사용했는데 이 함수는 모든 상황을 책임진다.그것은 통상적으로 Suite 또는 Test Suite 라고 불린다.describe 함수에서 우리는 it 함수로 테스트 코드를 작성합니다.위의 예에서, 우리는angular 응용 프로그램에 접근하여 텍스트 cy.visit("/") 를 포함하는 nav-wrapper 클래스를 포함하는지 검증합니다.
cypress는 요소를 얻는 것부터 단언하는 것까지 많은 API를 제공합니다.여기Items Manager는 DOM에서 요소를 참조하는 데 사용됩니다.이것은 cypress에서 가장 많이 사용되는 API입니다.
이제 두 번째 cmd 터미널을 열고 입력하십시오.

npx cypress open       //to open cypress test runner

처음에는 시간이 좀 걸리지만, 너는 이런 상황을 보게 될 것이다.

이것은 테스트 주자라고 불린다.파일 이름cy.get()을 누르면 다른 브라우저 실례를 열어 테스트합니다.이제 cypress 테스트를 사용하는 것이 얼마나 쉽고 빠른지 보실 수 있습니다.DemoTest.spec.js의 다른 테스트를 입력 필드에 쓰고 typing 단추를 누르면 새 todo를 추가합니다.

describe("Our Todo App Test Suite", () => {
  it.only("Type title and description", () => {
    cy.visit("/");
    cy.get("input[name='title']").type("Lunch")
    cy.get("input[name='description']").type("Eating lunch at 1")
    cy.get('input[type="submit"]').click()
    cy.get("ul.collection").find("li > strong").should("contain", "Lunch")
  });
  });
});

이 사례를 실행할 때, 두 입력 필드에 입력하고 제출 단추를 누르십시오. 이 예에서, 이 단추는 우리의 업무 목록에 새로운 업무 사항을 추가합니다. 마지막으로, 우리asserting는 추가된 업무 사항에 텍스트가 포함되어 있음을 발견했습니다Submit이제 처리해야 할 사항을 삭제하는 예시를 살펴보고 삭제되었는지 확인하겠습니다.

describe("Our Todo App Test Suite", () => {
  it.only("Type title and description", () => {
    cy.visit("/");
    cy.get("ul.collection > li").eq(1).find("a").click()
    cy.get("ul.collection > li").eq(1).find("form").find('button[class="btn red"]').click()
    cy.get("ul.collection > li").eq(1).should("not.exist")
  });
  });
});

이것이 바로cypress가 e2e 테스트를 진행하는 방법이다.현재cypress의 일부 값을 스스로 업데이트해 보십시오.만약 당신이 이 점을 성공적으로 해낼 수 있다면 축하합니다. 당신은 자신을 Lunch 라고 할 수 있습니다. 왜냐하면 자동화 테스트 엔지니어가 그들의 역할에 있어서 이렇게 하기 때문입니다.
그래서 나는 너희들이 이 문장을 좋아하고 새로운 것을 배우며 나를 따라 이런 문장을 더 많이 읽는 것을 잊지 않기를 바란다.
쾌락 테스트✌️✌️