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