Cypress 기본 문법 1

cypress 공식문서에 튜토리얼이 정말 잘 정리되어있다.
모든 내용은 공식 홈페이지에 나와있으니 참고바란다.

cypress 공식문서

baseUrl

cypress.json에 baseUrl을 설정하면 cy.visit을 통해 루트로 바로 접근 가능하다.

// /cypress.json
{
  "baseUrl": "http://localhost:3030"
}

** usage

cy.visit('/');

fixtures

fixtures는 원래 집안에 붙어있는, 이사갈때 가져갈 수 없는, 가구를 의미한다.
여기서는 seedFile정도로 보면 될것 같다.

// cypress/fixtures/todos.json
[
  {
    id: 1,
    name: 'Buy Milk',
    isComplete: false,
  },
  {
    id: 2,
    name: 'Buy Eggs',
    isComplete: true,
  },
];

** usage
cy.fixtures('todos').each(todo =>{
 console.log(todo) 
/*  {
    id: 1,
    name: 'Buy Milk',
    isComplete: false,
  },
*/
})

commands

commands파일을 통해서 함수를 export하는 기능을 흉내낼 수 있다.

// cypress/support/commands.js
Cypress.Commands.add('seedAndVisit', (seedData = 'fixture:todos') => {
  cy.server();
  cy.route('GET', '/api/todos', seedData);
  cy.visit('/');
});

** usage
// cypress/integration/input-form.spec.js
describe('Input form', () => {
  beforeEach(() => {
    cy.seedAndVisit([])
  })
)

alias

as를 통해 다른 이름으로 세팅할 수 있다.

describe('List items', () => {
  beforeEach(() => {
    cy.seedAndVisit();
  });

  it.only('Removes a todo', () => {
    cy.route({
      url: '/api/todos/1',
      method: 'DELETE',
      status: 200,
      response: {},
    });

// set get('.todo-list li') element as 'list'
    cy.get('.todo-list li').as('list');

** usage
// put 'at' sign at the front of alias
// invoke('show') means to make none-display element shown.
    cy.get('@list').first().find('.destroy').invoke('show').click();

    cy.get('@list').should('have.length', 3).and('not.contain', 'Milk');
  });
});

debugger

cypress test runnner안에서 dev tools를 함께 사용가능하다.

// TodoApp.js
...
  handleToggle (id) {
    const targetTodo = this.state.todos.find(t => t.id === id)
    ** usage
    debugger
    const updated = {
      ...targetTodo,
      isComplete: !targetTodo.isComplete
    }
    updateTodo(updated)
      .then(({data}) => {
        const todos = this.state.todos.map(
          t => t.id === data.id ? data : t
        )
        this.setState({todos: todos})
      })
  }
...

다음 글에서 계쏙..