45
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Cypressテストコードまとめ

Last updated at Posted at 2019-11-24

Cypressリンク

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

chromeプラグイン
Cypress Scenario Recorder

以下の記載は
公式の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
45
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
45
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?