Please enable JavaScript.

Coggle requires JavaScript to display documents.

Cypress - Coggle Diagram

- - - - Cy.commands.add('name', (...args) => {})
  - - - /integration/pages/homepage.js
  - - - global
        
        cypress.config.js
      - spec level override
        
        Cypress.config('defaultCommandTimmeout', 8000)
        
        workaround
        
        https://github.com/cypress-io/cypress/issues/8250
    - - env: { url: 'http://my.uat.domain.com' }
        
        tweak without modify the file
        
        npx cypress run --spec "cypress/integration/examples/test13.spec.js" --env url="https://my.production.domain.com"
    - - retries: { runMode: 1 }
  - - - https://www.npmjs.com/package/cypress-mochawesome-reporter
      - e2e: { video: true }
      - stores in cypress/reports/html
- - - - npx cypress run --headed
        
        open a window of electron and close when the test is done
        
        browser
        
        npx cypress run --browser chrome
    - - all specs
        
        npx cypress run
      - specific spec
        
        npx cypress run --spec "path_to_spec_file"
        
        In demo: npx cypress run --spec "cypress/integration/examples/test1.spec.js"
        
        npx cypress run --spec "path_to_spec" --browser chrome --headed
        
        chrome
        
        headed
        
        spec file
      - internally calling api of the browser and run test cases under the table
  - - - features
        
        config boilerplate
        
        Left bar > Settings > Project Settings
        
        Look for cypress.config.js settings
        
        time travel
        
        selector playground
      - open browser as a window and provide interactive UI for control
  - - - npm install cypress
        
        npx cypress oepn
        
        create a new folder called 'integration' under cypress folder
        
        put 'integration' folder in it and add spec files
        
        Cypress will create necessary files for us
  - - - test data, ex. Excel, XML, JSON...
    - - reusable commands or methods
- - - - ChroPath (Chrome plugin)
      - Cypress Selector Playground
    - - like css
        
        cy.get('parent child')
  - - - cy.get('.search-keyword').type('ca')
    - - cy.wait(2000)
    - - cy.get('.product').should('have.length', 4)
      - handle invisible element
        
        cy.get('.product:visible')....
  - - - find()
        
        cy.get('.products').find('.product')
    - - .eq()
        
        cy.get('.products').find('.product').eq(2)
    - - .contain()
        
        cy.get('.products').find('.product').eq(2).contains('ADD TO CART')
    - - .click()
        
        cy.get('.products').find('.product').eq(2).contains('ADD TO CART').click()
  - - - `cy.get('.products').find('.product').each(($el, index, $list) => {
        if (...) {
        cy.wrap($el).find('button').click();
        }
        })
        
        $el is jQuery<HTMLElement>
        
        jQuery methods could be use
        
        use cy.wrap() to transform back to cypress object
  - - - .as()
        
        cy.get('.products').as('products') cy.get('@products').eq(1).contains('ADD TO CART').click();
    - - log on browser console
      - put into promise's then()
        
        cy.get(...).then(() => console.log())
- - - - selector
        
        single
        
        use #id
        
        .check()
        
        .should('be.checked')
        
        .uncheck()
        
        .should('not.be.checked')
        
        multiple
        
        .get('input[type="checkobox"]')
        
        .check(['option2', 'option3'])
      - disabled
        
        .should('be.disabled')
    - - static dropdown
        
        .select('option2')
        
        will scan options and find the one that have the same value, text or index
        
        should('have.value', 'option2')
    - - .should('have.attr', 'minlength', '2')
  - - - .should('be.visilbe')
        
        behavior --> be
      - .should('not.be.visible')
  - - - invoke jQuery function
    - - change domain
        
        cy.origin('https://abc.com.tw', () => { /** all test inside here**/})
      - same domain
        
        write directly under previouse code
      - copy url and visit
        
        cy.get('#opentab').then((el) => { const url = el.prop('href'); cy.visit(url); cy.origin(url, () => {/** test code */}
  - - - .invoke('show')
    - - .click({ force: true })
      - click on invisible element will throw an error in default
- - - - only one h1 tag in the iframe page
- - - - runs only once before all 'it' statement
    - - run before every 'it' statement