[Setup] Cypress + windows

outline

Cypressをwindows環境で試してみた

setup

install Node.js for npm

nodejsのinstallerをもちいてinstallする。
install optionで"必要なライブラリーなどはinstallする"を選択する。

その後、command promptを起動し、npmを実行し、動くことを確認する

install Cypress

npm install cypress --save-dev

起動確認

npx cypress open

sample

keibaのloginをサンプルとして作ってみた

以下のように、create newすると、最低限のcodeが作成される

シナリオは

1. brower openして https://keiba.rakuten.co.jp にアクセスする
2. マイページログインをクリックする
3. IDを入力して、次へをクリック
4. Passwordを入力して、ログインする

context('login', () => {
  it('login', () => {
    cy.visit('https://keiba.rakuten.co.jp')
    cy.get('#introduceArea > div.mypageLogin > a').click()
    
    cy.origin('https://login.account.rakuten.com',() => {
      cy.get('#scrollingLayer > div.hc.p-30-0.spacing-24-24.s.c.wf.ct.cl > h1 > div' , { timeout:10000 }).should('have.text','楽天会員 ログイン')
      // input id
      cy.get('#user_id').clear()
      cy.get('#user_id').type('Login ID')
      cy.get('#cta001 > div > div').click()
      // input password
      cy.get('#password_current').clear()
      cy.get('#password_current').type('Password')
      cy.get('#cta011 > div > div').click()
      
    })

    cy.get('#headline > h1').should('have.text','マイページトップ' , { timeout:5000 })
    cy.get('body > div.frheader > div.glonavmain > div > ul > li:nth-child(1) > a').click()

  })
})

Cypressのオブジェクトの特定にはselectorを用いる。

chrome developer toolでselector をcopyして取得する。

Cypressは複数のdomain間をはさむことは基本的にできない。
たとえば、ログインするとき、別のdomainに遷移するとき、そのままでは以下のようなエラーになる

その解決方法として、 originを用いる。

実際にCypressで実行してみた。