Cypressで要素をXPathで取得するにはCypress-xpathを使用する

3454 ワード
自動テスト e2e テスト自動化 Cypress e2e テキストリンク

環境

  • macOS Mojave バージョン 10.14.6

前提条件

  • Cypressは導入完了している

対象者

  • Cypressで要素をXPathで取得したいが方法が分からない
  • 要素をXPathで取得する時に、簡単に要素を特定したい

手順

「cypress-xpath」をインストールする

  • 1. 以下のコマンドをターミナルで実行する
npm install -D cypress-xpath
  • 2. 「cypress/support/index.js」に以下のコードを追加する
require('cypress-xpath')

取得したい要素のXPathを取得する

  • 1. 「取得したい要素のコントロール」を右クリックして、「検証」をクリックする
  • 2. 「ハイライトされた要素」を右クリックする
  • 3. 「Copy」->「Copy full xpath」をクリックする

  • 4. クリップボードに、以下のXpathが保存する
/html/body/div[1]/div/div/div[3]/header/div[2]/div[1]/ul[1]/li[1]/a

Cypressでxpathによる要素を指定する

  • 1. 「cy.xpath()」で4.で取得したxpathを設定する
describe("Cypress Test", () => {
  it('Features click', () => {
    cy.visit('https://www.cypress.io/')

    cy.xpath('/html/body/div[1]/div/div/div[3]/header/div[2]/div[1]/ul[1]/li[1]/a').click()
    })
})

test runnerでテストが通っていることを確認する

  • 1. 「xpath」による要素指定ができており、clickしている