[cypress] configuration

https://docs.cypress.io

Version

"cypress": "^4.9.0",
"@cypress/webpack-preprocessor": "^5.4.1",

Installation

npm install --save-dev cypress @cypress/webpack-preprocessor

@cypress/webpack-preprocessor는 webpack 설정을 커스텀하기 위함 (optional)

Configuration

package.json

project 옵션을 이용해서 cypress 관련 파일들이 위치한 생성할 경로를 지정하여 실행한다. 해당 옵션을 지정하지 않는 경우에는 <project_dir> 하위 경로에 기본으로 생성된다.

    "cypress:open": "cypress open --project tests",
    "cypress:run": "cypress run --project tests",

위와 같이 실행하면 <project_dir>/tests 하위에 cypress 폴더가 없는 경우에는 해당 폴더와 관련 설정 파일들이 생성된다.

Start server before running cypress

cypress 실행 전에 개발 서버를 실행시키기 위해선 start-server-and-test를 설치해준다.

npm install --save-dev start-server-and-test

그리고 package.json을 아래와 같이 수정해준다.

    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "cypress:open": "cypress open --project tests",
    "cypress:run": "cypress run --project tests",
    "test:e2e:open": "start-server-and-test start http://localhost:8080 cypress:open"
    "test:e2e:run": "start-server-and-test start http://localhost:8080 cypress:run"

cypress.json

cypress 프로젝트 폴더와 동일한 경로에 해당 파일이 위치한다.

{
"baseUrl": "http://localhost:3000",
"video": false,
"viewportWidth": 375,
"viewportHeight": 667,
"testFiles": "**/*.spec.*"
}

cypress/plugins/index.js

path alias를 설정하거나, 이미지 파일 로딩이 등 관련 webpack 설정이 필요한 경우, @cypress/webpack-preprocessor 플러그인을 이용하여 아래와 같이 설정해준다.

const wp = require('@cypress/webpack-preprocessor');
const path = require('path');

const resolve = (dir = '') => path.resolve(__dirname, '../../..', dir);

module.exports = (on, config) => {
  const options = {
    webpackOptions: {
      module: {
        rules: [
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: 'url-loader',
          },
        ],
      },
      resolve: {
        // extensions: ['.ts', '.js'],
        // add the alias object
        alias: {
          'utils': resolve('src/utils'),
          'tests': resolve('tests'),
        },
      },
    },
  };

  on('file:preprocessor', wp(options));
};

CLI Command

run specific test senario

https://docs.cypress.io/guides/guides/command-line.html#cypress-run-spec-lt-spec-gt

npm run cypress:run -- --spec "cypress/integration/customer.spec.js"
npm run cypress:run -- --spec "**/customer**"

Writing Test

mock server

https://docs.cypress.io/api/commands/route.html
```
cy.server();
```

cy.route({ method: 'GET', url: '**/customer', status: 200, response: { code: 0, content: {}, }, }).as('fetchCustomer');

cy.wait('@fetchCustomer');


### Example

```javascript
  describe('not given account id param', () => {
    beforeEach(() => {
      cy.visit('/customer');
      cy.server();
    });

    it('should display account layer', () => {
      createAccountListMockApi();
         cy.route({
         method: 'GET',
         url: '**/customer',
         status: 200,
         response: {
             code: 0,
             content: {},
         },
      }).as('fetchCustomer');

      cy.wait('@fetchCustomer');

      cy.get('header').within(() => {
        cy.get('.header__lft').should('have.class', 'header__back');
        cy.get('.header__rgt').should('have.length', 0);
      });

      cy.get('.btn-group')
        .find('a.btn')
        .click()
        .get('div.ly > .ly-acc')
        .find('li.acc-lst__item')
        .first()
        .click();

        cy.location().should(location => {
           expect(location.pathname).to.eq('/');
           expect(location.search).to.be.empty;
        });
    });
  });

gloriaJun / til