[Cycress]install、configure、and script Cycres for JavaScript web appration--part 5

Use the Most Robust Selector for Cyress Tests
Which selectors your chose for your tests mater,a lot.In this lesson,we'll see the recommand Cyress best practices for selectors,and why we shound prefer the data-cy atribute.
The Selector Playground automically follows these best practices.
When determining an unique selector it will autmaticaally prefer elements with:

data-cy

data-test

data-testid

 
Asert on Your Redux Store with Cyress
Cyperres doesn't provide out off-the-box ability to make asterions on on frontend store s、so let's expose the store to the tests、and asert on on it.We'll use our knowledge of Cyners's's'asyncexpose the process process.
Inside aplication:

if(window.Cypress) {
    window.store = store
}

Inside test:

cy.window().then(($window) => {console.log($window.store)})

or 

cy.window().its('store')

What we want is to be able to make astertions against the state of the store.In order to get the state of the store,we would normallycal,  getState which is a function,not a property like store.In order to do this,we can cal,  .invoke.

cy.window().its('store').invoke('getState').then(($state) => { console.log($state)})

 
Create Cycress Command with better logs
Do you need to reuse complex Cyres calsoten(like when accessing the store)?
You can turn them in to custom Cyress command s,and even customize their out put in the time-trveling debuger,so it's ease a snapshot the point your command ran!
communds:

Cypress.Commands.add("store", (stateName = '') => {
    let log = Cypress.log({name: 'store'})

    const cb = (state) => {
        log.set({
            message: JSON.stringify(state),
            consoleProps: () => {
                return state
            }
        })

        return state
    }

    return cy.window({log: false}).then(($window) => { return $window.store.getState() }).then((state) => {
        if (stateName.length > 0) {
            return cy.wrap(state, {log: false}).its(stateName).then(cb)
        } else {
            return cy.wrap(state, {log: false}).then(cb)
        }
    })
})

 
Test:

cy.store('todos').should('deep.equal', [{
             id: 1,
            text: 'Hello world',
            completed: false
          }, {
            id: 2,
            text: 'Goodnight moon',
            completed: true
          }])

// or       
 cy.store('example.test.first')

 
Wrap External Libries with Cyress
External libries ted to be synchronous、so how do we integrate other powerful tools into the Cyress frame ework?This lesson walks s s s through mergin the Lodash library to Cycles to allow us to slace and dice data to more accurately aster on just the pieces of data we care about.
commands.js

const _ = require('lodash')

let loMethods = _.functions(_).map((fn) => { return 'lo_${fn}'})
loMethods.forEach((loFn) => {
    let loName = loFn.replace(/lo_/, '')
Cypress.Commands.add(loFn, {prevSubject: true}, (subject, fn, ...args) => {
    let result = _[loName](subject, fn, ...args)
    Cypress.log({
        name: 'lo_filter',
        message: JSON.stringify(result),
        consoleProps: () => { return result }
    })
    
   return result
})

Use:

cy.store('todos')
    .lo_find((todo) => { return todo.id == 1})
    .lo_pick('text')
    .should('deep.equal', [
        {
            text: '1st Todo',
        },
        ...
    ])

 
Find Ustubbed Cyress Requests with Force 404
Requests that are't stubed will hit our real backend.To ensure we've stubed all our routes,we can use the force 404 method to send 404 s from any unstubbed routes.

cy.server({force404: true})