Cypressテストコードまとめ

# Cypressリンク

公式Doc
https://docs.cypress.io/guides/overview/why-cypress.html

chromeプラグイン
[Cypress Scenario Recorder](https://chrome.google.com/webstore/detail/cypress-scenario-recorder/fmpgoobcionmfneadjapdabmjfkmfekb)

以下の記載は
公式のAPIページから引用したものです。そちらを参照するとより詳細な情報が見れます。
https://docs.cypress.io/api/api/table-of-contents.html

# Cypress Commands
## Visit a page

```integration/sample_spec.js
describe('My First Test', function() {
  it('Visits the Kitchen Sink', function() {
    cy.visit('https://example.cypress.io')
  })
})
```

## エレメント取得
```integration/sample_spec.js
cy.contains('type')
cy.get('.action-email')
cy.get('form').within(() => {
  cy.get('input').type('Pamela') // Only yield inputs within form
  cy.get('textarea').type('is a developer') // Only yield textareas within form
})

cy.get('nav').children()            // Yield children of nav
cy.get('td').closest('.filled')     // Yield closest el with class '.filled'
cy.contains('ul').end()             // Yield 'null' instead of 'ul' element
cy.get('td').filter('.users')       // Yield all el's with class '.users'
cy.get('.article').find('footer')   // Yield 'footer' within '.article'
cy.get('nav a').first()             // Yield first link in nav
cy.focused()                        // Yields the element currently in focus
cy.get('nav a').last()              // Yield last link in nav
cy.get('nav a:first').next()        // Yield next link in nav
cy.get('.active').nextAll()         // Yield all links next to `.active`
cy.get('div').nextUntil('.warning') // Yield siblings after 'div' until '.warning'
cy.get('input').not('.required')    // Yield all inputs without class '.required'
cy.get('header').parent()           // Yield parent el of `header`
cy.get('aside').parents()           // Yield parents of aside
cy.get('p').parentsUntil('.article') // Yield parents of 'p' until '.article'
cy.get('tr.highlight').prev()       // Yield previous 'tr'
cy.get('.active').prevAll()         // Yield all links previous to `.active`
cy.get('p').prevUntil('.intro')     // Yield siblings before 'p' until '.intro'
cy.get('td').siblings()             // Yield all td's siblings

cy.root()   // Yield root element <html>
cy.get('nav').within(($nav) => {
  cy.root()  // Yield root element <nav>
})
```
## 入力
```integration/sample_spec.js
cy.get('input').type('Hello, World')     // Type 'Hello, World' into the 'input'

cy.get('select').select('user-1')        // Select the 'user-1' option

cy.get('[type="checkbox"]').check()      // Check checkbox element
cy.get('[type="radio"]').first().check() // Check first radio element

cy.get('[type="checkbox"]').uncheck()    // Unchecks checkbox element

cy.get('[type="text"]').clear()          // Clear text input
cy.get('textarea').type('Hi!').clear()   // Clear textarea
cy.focused().clear()                     // Clear focused input/textarea
```
## エレメント操作
```integration/sample_spec.js
cy.get('input').first().focus()   // Focus on the first input

cy.get('[type="email"]').type('me@email.com').blur() // Blur email input
cy.get('[tabindex="1"]').focus().blur()              // Blur el with tabindex

cy.get('button').click()             // Click on button
cy.focused().click()                 // Click on el with focus
cy.contains('Welcome').click()       // Click on first el containing 'Welcome'

cy.get('button').dblclick()          // Double click on button
cy.focused().dblclick()              // Double click on el with focus
cy.contains('Welcome').dblclick()    // Double click on first el containing 'Welcome'

cy.get('.menu').rightclick()         // Right click on .menu
cy.focused().rightclick()            // Right click on el with focus
cy.contains('Today').rightclick()    // Right click on first el containing 'Today'

cy.get('.menu-item').trigger('mouseover')

cy.get('footer').scrollIntoView()       // Scrolls 'footer' into view

cy.scrollTo(0, 500)                     // Scroll the window 500px down
cy.get('.sidebar').scrollTo('bottom')   // Scroll 'sidebar' to its bottom

cy.get('form').submit()   // Submit a form

cy.get('ul>li').each(function () {...}) // Iterate through each 'li'
cy.getCookies().each(function () {...}) // Iterate through each cookie

```
## Assert
```integration/sample_spec.js
cy.get(':checkbox').should('be.disabled')
cy.get('form').should('have.class', 'form-horizontal')
cy.get('input').should('not.have.value', 'US')

// and
cy.get('.err').should('be.empty').and('be.hidden') // Assert '.err' is empty & hidden
cy.contains('Login').and('be.visible')             // Assert el is visible
cy.wrap({ foo: 'bar' })
  .should('have.property', 'foo')                  // Assert 'foo' property exists
  .and('eq', 'bar')                                // Assert 'foo' property is 'bar'

// eq
cy.get('tbody>tr').eq(0)    // Yield first 'tr' in 'tbody'
cy.get('ul>li').eq(4)       // Yield fifth 'li' in 'ul'
```

## データ関連
```integration/sample_spec.js

cy.setCookie('auth_key', '123key') // Set the 'auth_key' cookie to '123key'

cy.getCookie('auth_key')     // Get cookie with name 'auth_key'
cy.getCookies()              // Get all cookies

cy.clearCookie('authId')     // clear the 'authId' cookie
cy.clearCookies()            // clear all cookies
cy.clearLocalStorage()       // clear all local storage

cy.readFile('menu.json')
cy.writeFile('menu.json')
```

## ブラウザ表示、URL、移動関連
```integration/sample_spec.js
// Navigate back or forward to the previous or next URL in the browser’s history.
cy.go('back')

cy.hash()     // Get the url hash

cy.location()       // Get location object
cy.location('host') // Get the host of the location object
cy.location('port') // Get the port of the location object

cy.reload()

cy.url()    // Yields the current URL as a string

cy.viewport(550, 750)    // Set viewport to 550px x 750px
cy.viewport('iphone-6')  // Set viewport to 375px x 667px
```


## その他
```integration/sample_spec.js
cy.clock()

cy.exec('npm run build')

cy.fixture('users').as('usersJson')  // load data from users.json
cy.fixture('logo.png').then((logo) => {
  // load data from logo.png
})

// assume App.start calls util.addListeners
cy.spy(util, 'addListeners')
App.start()
expect(util.addListeners).to.be.called
```

## デバッグ
```integration/sample_spec.js
cy.debug().getCookie('app') // Pause to debug at beginning of commands
cy.get('nav').debug()       // Debug the `get` command's yield

// Print a message to the Cypress Command Log.
cy.log('created new user')

cy.pause().getCookie('app') // Pause at the beginning of commands
cy.get('nav').pause()       // Pause after the 'get' commands yield
```