Help us understand the problem. What is going on with this article?

Cypressテストコードまとめ

Cypressリンク

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

chromeプラグイン
Cypress Scenario Recorder

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
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした