사이프레스(Cypress) 설치 및 사용

설치

npm install cypress
또는
npm install cypress --save-dev

실행하는 법

  • 프로젝트의 root 디렉토리에서 아래의 명령어 입력
./node_modules/.bin/cypress open
  • 또는 package.json에 아래의 코드를 추가
{
  "scripts": {
    "cypress:open": "cypress open"
  }
}
  • 그 후 아래의 코드로 쉽게 열 수 있음
npm run cypress:open

테스트 파일 생성

  • 아래 경로에 sample_spec.js 파일 생성
├── project
│   ├── node_modules
│   └── cypress
│       └── integration
│           └── sample_spec.js
│   ├── pages
├──

간단한 테스트 생성

  • describe 와 it 는 Mocha,
  • expect는 Chai 라는 툴과 프레임워크에서 온 것
describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(false)
  })
})

요소 선택 및 사용법

  • cy.visit()

  • 파라미터로 받는 url로 페이지 이동
cy.visit('http://localhost:3000');

  • cy.url().should()

    • 페이지 url을 검증
cy.url()
  .should('include', '/post/postList')

  • cy.get()

  • 요소를 선택

  • .type()

  • 선택한 요소에 텍스트를 입력
  • { delay: seconds } 를 이용해 입력하는데 걸리는 시간을 지정 가능

  • .select()

  • 셀렉트박스의 옵션을 선택

  • .should()

  • 입력된 텍스트 검증
  • 'have.value' 로 우측에 입력한 'WebMvcTest_Wiki'라는 값을 가져야함을 명시
↓ postList.js 

<input type="text" data-testid="searchTitleText" />

↓ sample_spec.js

cy.get('[data-testid="searchTitleText"]')
  .type('WebMvcTest_Wiki', { delay: 150 })
  .should('have.value', 'WebMvcTest_Wiki');

cy.get('[data-testid="inputCategorySelect"]')
  .select('2')
  .should('have.value', '2');

click if exists

cy.get("body").then($body => {
      if ($body.find("#element_name").length > 0) {   
        cy.get("#element_name")
          .should('to.be.exist')
          .click();
      }
    });

links

social