Cypress系列（98）- cypress-xpath 插件, xpath() 命令詳解

如果想從頭學起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

 

前置學習

首先，得對 xpath 語法熟悉哦，可看此鏈接進行學習

https://www.cnblogs.com/poloyy/p/12626196.html

 

官方地址

https://github.com/cypress-io/cypress-xpath

 

安裝方式

npm

npm install -D cypress-xpath

 

Yarn

yarn add cypress-xpath --dev

 

項目導入插件

在 cypress/support/index.js 文件下寫下面語句即可

require('cypress-xpath')

 

個人總結

調用 xpath() 命令的兩種方式

// 直接 cy.
cy.xpath()

// 獲取到 element 元素之后再調用
cy.get('ul').xpath()
cy.xpath().xpath()
cy.get('div').first().xpath()

 

xpath() 命令的返回結果

單個 element 元素或多個 element 元素組成的數組

 

入門使用的栗子

it('簡單的栗子', function () {
    cy.xpath('//ul/li')
        .should('have.length', 6)
});

 

調用 Cypress 命令后再接 xpath 命令

it('調用 Cypress 命令后再接 xpath 命令', function () {
    cy.xpath('//ul')
        .first()
        .xpath('./li')
});

 

調用 xpath 后再接一次 xpath 命令

it('調用 xpath 后再接一次 xpath 命令', function () {
    cy.xpath('//body/ul')
        .xpath('./li')
});

 

根據屬性定位元素

it('根據屬性定位元素', function () {
    cy.xpath('//*[@id="form-wrapper"]')
    cy.xpath('//*[@class]')
});

 

 選取當前節點的父節點再找元素

it('選取當前節點的父節點', function () {
    cy.xpath('//*[@id="form-wrapper"]/../h2')
});

 

根據索引定位

it('根據索引定位', function () {
    cy.xpath('//body/ul[1]/li[3]')
});

 

條件表達式

it('條件表達式', function () {
    cy.xpath('//*[@name="password" or @id="form-wrapper"]')
}

 

模糊匹配函數

it('模糊匹配函數', function () {
    cy.xpath('//*[starts-with(@class,"e")]')
    cy.xpath('//*[contains(text(),"Show")]')
});

 

定位函數

it('定位函數', function () {
    cy.xpath('//input[position()=1]')
});

 

其他定位方式

it('其他定位方式', function () {
    cy.xpath('//li[position()=2]/preceding-sibling::li')
    // 等價寫法
    cy.xpath('//li[position()=2]/../li[position()<2]')
});