측백나무초보자를 위한 io 단계부터 단계까지 테스트 강좌

7439 단어 beginnerstestingtutorialjavascript
종합적인 테스트는 소프트웨어 개발의 중요한 부분이다.많은 회사들이 테스트를 사용하여 그들의 제품이 정확한 품질을 가지고 있음을 확보한다.엔드 투 엔드 테스트에 사용할 수 있는 도구 중 하나는 Cypress 입니다.

측백나무는 무엇입니까?


Cypress는 Mocha(다른 JavaScript 테스트 프레임워크) 위에 구축된 JavaScript 기반 테스트 프레임워크입니다.다른 테스트 도구(예를 들어 Selenium)에 비해 Cypress는 웹 드라이버를 사용하지 않고 테스트를 실행합니다.Cypress는 응용 프로그램과 같은 실행 순환에서 실행됩니다.그것은 하나의 노드를 사용한다.js 서버 프로세스와 통신하는 테스트입니다.
또한 Cypress를 사용하면 다음과 같은 몇 가지 이점이 있습니다.

  • 자동 대기 - Cypress는 DOM이 요소를 로드할 때까지 자동으로 대기합니다.원소를 불러오기 전에 원소를 기다리기 위해 은밀하고 현저하게 기다릴 필요가 없습니다.

  • 실시간 다시 로드-Cypress는 조정 후 테스트 파일을 자동으로 저장하고 새 버전을 자동으로 다시 로드합니다.수동으로 작업할 필요가 없습니다.

    • 이 강좌를 계속하기 전에 알아야 할 내용


    비록 나는 이 강좌가 초보자에게 우호적일 수 있도록 노력할 것이지만, 이 강좌를 계속 공부하기 전에 유용한 일이 있을 수 있다.
  • HTML 및 CSS
  • 화살표 함수, 비동기식 및 약속과 같은 JavaScript 개념
  • 더 좋지만 필요 없음: 모카커피

    • Cypress 설치


    Cypress를 설치하기 전에 컴퓨터에 node.js & npm 가 설치되어 있는지 확인해야 합니다.이 소프트웨어를 설치하지 않은 경우 공식 Node website 을 방문하여 최신 장기 지원 (LTS) 버전을 다운로드하십시오.

    노드가 설치되어 있는지 확인합니다.js와 npm, 터미널 또는 명령 프롬프트를 열고 다음 명령을 입력합니다.
    NPM의 경우:npm --v노드의 경우:node -v버전 번호를 응답으로 얻으면 장치에 성공적으로 설치되었음을 의미합니다.
    이제 우리는 마침내 Cypress를 설치할 수 있게 되었다.Cypress를 설치하려면 다음 두 명령을 실행해야 합니다.
  • npm init - 프로젝트
    • 에서 사용할 수 있는 모든 의존 항목을 포함하는 package.json 명령을 만듭니다.
  • npm install cypress --save-dev - 이 명령은 프로젝트 폴더에 Cypress를 로컬로 설치합니다.이 과정은 몇 분이 걸려야 완성할 수 있다.
    • Cypress를 시작하려면 터미널에서 명령을 실행할 수 있습니다./node_modules/.bin/cypress open.그러면 Cypress 및 아래의 새 창이 열립니다.이 모든 파일은 Cypress를 처음 설치할 때 얻은 예제 테스트입니다.통합 폴더에 있습니다.

    텍스트 편집기를 열고 방금 만든 Cypress 프로젝트 폴더로 이동합니다.너는 네가 좋아하는 IDE를 자유롭게 사용할 수 있다.사용하겠습니다Visual Studio Code.
    Cypress 창에서 테스트를 실행하면 다음 페이지가 표시됩니다.

    왼쪽에, 우리는 테스트의 이름과 아래의 단일 테스트의 이름을 가지고 있다.오른쪽에서 브라우저에 표시된 테스트 출력을 볼 수 있습니다.우리는 우리의 테스트 결과가 무엇인지 왔다 갔다 볼 수 있다.
    Cypress 테스트 파일 만들기
    Cypress에서 테스트 파일을 만듭니다.먼저 example 의 "integrations 폴더와 모든 테스트 파일을 삭제합니다.

    Cypress 테스트 파일 만들기


    테스트에 대해 우리는 이 demo 사이트를 사용할 것이다.
    테스트 파일의 문법에 대해 우리는 아래의 코드를 사용할 수 있다.그것들을 분해합시다.
    /// <reference types="cypress" />

describe("Account creation", () => {
before(() => {
cy.log('Tests have been started')
})
beforeEach(() => {
cy.visit('https://www.demoblaze.com/index.html')    
// Click on the sign up button
    cy.get('#signin2').click()

    // Verify sign up page
    cy.get('#signInModalLabel').contains('Sign up')

    cy.wait(2000)
    // Function that generate a new username with each new test
    function generateNewUsername() {
        let text = "";
        let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"

        for(let i = 0; i < 10; i++) 
        text += alphabet.charAt(Math.floor(Math.random() * alphabet.length))
        return text;
    }

    const generatedUsername = generateNewUsername()
    // Write the username and the password
    cy.get('#sign-username').type(generatedUsername)
    cy.get('#sign-password').type('randompassword')
})
it('should create a new account for the ecommerce website', () => {

    // Click on the Sign up button
    cy.get('button').contains('Sign up').click()

    // Verify alert message
    cy.on('window:alert', (str) => {
        expect(str).to.equal('Sign up successful.')
    })
})

it('should cancel creating the new account for the ecommerce website', () => {

    // Click on the close button
    cy.get('#signInModal > .modal-dialog > .modal-content > .modal-footer > .btn-secondary').click()
    // Verify the sign up page is not visible
    cy.get('#signInModalLabel').should('not.be.visible')
})
afterEach(() => {
    cy.log('Test has succeeded.')
  })
})

    공구서류


    파일의 맨 위에 배치해야 합니다/// <reference types="cypress" />.Cypress 구문을 사용할 수 있도록 하기 위해서입니다.

    설명()


    그리고 우리는 describe() 방법을 보았다.describe 방법은 우리 테스트 그룹의 이름을 표시합니다.문자열의 테스트 용례의 이름과 화살표 함수 두 가지 인자가 있습니다.

    연결


    테스트 파일에서 before(),beforeEach()과after()를 볼 수 있습니다.이것들을 갈고리라고 한다.갈고리는 테스트에서 전제 조건을 설정하는 데 사용되며, 테스트를 정리하는 데도 사용된다.갈고리를 사용하면 코드가 더욱 깨끗해져서 우리는 코드가 중복되는 것을 방지할 수 있다.측백나무에는 네 종류의 갈고리가 있다.
  • before() - describe()의 모든 테스트 전에 한 번 실행
  • beforeEach() - describe() 의 각 테스트 전에 실행
  • after() - describe() 에서 모든 테스트를 수행한 후 한 번 실행
  • afterEach() - describe() 에서 테스트 후 실행

    • it（）

    it() 방법은 하나의 테스트 이름을 설명하는 방법이다.describe() 방법과 마찬가지로 하나의 테스트 이름과 화살표 함수 두 개의 매개 변수가 필요합니다.

    Cypress 내장 방법


    Cypress에는 여러 가지 방법이 있습니다.너무 많은 토론이 있기 때문에 나는 그 중에서 흔히 볼 수 있는 것들을 토론할 것이다.Cypress 방법에 대해 더 알고 싶으면 documentation 을 참조하십시오.
    Cypress에서는 다음과 같은 코드를 작성합니다.cy.log
  • cy - Cypress 메서드를 사용하고 있음을 밝히려면 먼저 작성해야 합니다
  • log() - 사용 가능한 내장 방법 예제

    • 명령 링크


    또한 다양한 Cypress 방법을 사용하여 결합할 수 있습니다.이것은 명령 링크라고 합니다.명령 체인의 예는 다음과 같습니다.
        cy.get('#sign-username').type(generatedUsername)
    코드를 분해해 봅시다.
  • cy - Cypress 메서드를 사용하고 있음을 나타냅니다
  • get() - 요소 가져오기 방법
  • type() - 검색된 요소에 텍스트를 입력합니다.

    • 단언


    Cypress에서 우리가 할 수 있는 마지막 일은 단언이다.Cypress에서 단언하는 것은 웹 페이지에서 어떤 요소나 다른 값이 사용할 수 있는지 확인하기 위해서입니다.단언의 예는 다음과 같습니다.
        cy.get('#signInModalLabel').should('not.be.visible')
    우리는 CSS 선택기를 사용하여 요소를 읽어들이고 should 방법으로 요소가 보이는지 확인합니다.documentation 에서 다른 유형의 단언을 찾을 수 있습니다.

    총결산


    나는 이 강좌가 너에게 어떻게 Cypress를 사용하는지 가르쳐 주고 기본 지식을 이해할 수 있기를 바란다.만약 당신이 이 글을 좋아한다면, 당신의 친구/추종자와 공유하세요.만약 네가 더 많은 문장을 읽고 싶다면, 반드시 시사통신에 가입해야 한다.
    만약 당신이 동영상을 보고 싶다면, 나는 재생 목록을 만들어서 어떻게 Cypress를 사용하는지 소개합니다.아래에서 확인하십시오👇
    자세한 내용은 https://helloiamarra.com/ 를 참조하십시오.
    비생산 환경 계정 권한 예
    처음부터 마이크로 로밍 연구 복제 구축

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage