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]')
});