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

環境

• macOS Mojave バージョン 10.14.6

前提条件

• Cypressは導入完了している

対象者

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

手順

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

• 1. 以下のコマンドをターミナルで実行する

npm install -D cypress-xpath

• 1. 「cypress/support/index.js」に以下のコードを追加する

require('cypress-xpath')

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

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

• 1. クリップボードに、以下の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している