Cypress - Tips

Sharing code between UI and test

Creating Page Objects

import { Ids } from '../../../src/app/constants';

class LoginPage {
  visit() {
    cy.visit('/login');
  }

  get username() {
    return cy.get(`#${Ids.username}`);
  }
}
const page = new LoginPage();

// Later
page.visit();

page.username.type('john');

Explicit assertion

Commands and chaining

Using Contains for easier querying

Smart delays and retries

Implicit assertion

Waiting for and HTTP request

Mocking an HTTP request response

Asserting an Http request response

Mocking time

Unit testing application code

Mocking in unit testing

Command - execution separation

Breakpoint

Start server and test

• TypeScript Deep Dive

Oraganizing Tests, Loggin In, Controlling State

• Best Practices talk at AssertJS
  shared common test

make dicisions what to test right

strategies
1. stub all request : cy.server(), cy.route(), set Status code, set Response bodies, Test dege case
Fast, Easy, Flexible / No Server, DB <-> Not True E2E
Requires Fixtures

2. Static User : Shared User + Credentials OAuth Login, Pre-seeded Databases
   Real Session E2E
   <-> Shares Test State(should reset seeded db)
   Require Server, Seed the DB

3. Dynamic User : New User for each Test - Modify Db within Tests, Query DB within Tests
   No state Mutations
   Flexible/Powerful
   DB setup/Teardown
   <-> slow/complex

로그인 테스트에서 회원생성 페이지로 가는걸 확인할 필요는 없다
-> isolation

Settings.specs
login steps에서 했던 테스트가 필요(Abstraction, Reusable, Decoupled)
beforeEach()=> cy.login()

Cypress.Commands.
cy.visit('')
cy.get().type()
cy.hash().should('eq', '#/')

Recommend Paths: support index.js

로그인에 필요한 리소스를 최소화시킬 필요가 있다.
loginpage
1. onFormSubmit, 2. Reads form values, 3. POST /api/users/login,
4. Success:save token 5. on Load check for token

Cypress.Commands.add('login', () => {
 cy.request({
 method:'POST',
   url:'',
   body:{
     user:{
     ... 
     }
   }
 }) . then((res) => {
  window.localStorage.setItem('jwt',res.body.user.token)})
}

Don't use the Ui to build up state
Set state directly / programmatically

Don't use page objects to share UI knowldege
Write specs in isolation, avoid coupling

Don't limit yourself trying to act like a user
You have native access to everything

Control Time:cy.clock(),
Stub Objects:cy.stub()
Modify Store:cy.window()

Moving Around The Testing Pyramid

problem : too many successful tests
snapshot test - show us what has changed
E2E testing should do things a user would do