playwright-xpath选择器

绝对定位：以/开头，/代表层级关系相对定位：靠自己的特征来定位以//开头  和css>大于号一样的效果

相对定位：靠自己的特征来定位以//开头                                   和css " "空格一样的效果

//标签名[@属性=值]

//a[@name='other']

案例:

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    expect(page.locator('//div[@id="other"]')).to_be_visible()
    page #断点

文本匹配 //标签名[text()=值]

//a[text()='某某某']

案例:

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    expect(page.locator('//ul[text()="我是ul"]')).to_be_visible()
    page #断点

包含 //标签名[contains(@属性/text(),值)]

案例:xpath 包含文字案例,案例中-是ul可以是文字,也可以是属性

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    expect(page.locator('//ul[contains(text(),"是ul")]')).to_be_visible()
    page #断点

案例: 同时选中两个calss

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    expect(page.locator('//div[@class="style" and @def="style01"]')).to_be_visible()
    page #断点

另一种写法:一般这种写法用的多

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    expect(page.locator('//div[@class="style"][@def="style01"]')).to_be_visible()
    page #断点

案例:css 两个 满足一个条件就可以

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    expect(page.locator("//div[@class='style' or @def='style01']")).to_have_count(2)
    page #断点

案例:不包含某一个属性

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    page.locator("//div[@class='style'not(@def='style01')]")

案例:同时选中两个元素

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    expect(page.locator('//div[@class="style"]|//div[@id="other"]')).to_have_count(3)
    page #断点

xpath轴定位

xpath:找到节点

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    expect(page.locator('//div[contains(@def,"style01")]')).to_have_count(3)
    page #断点

xpath:通过子节点找到父节点:    /parent::父元素名称

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    page.locator('//div[contains(@def,"style01")]/parent::div')
    page #断点

xpath:通过子节点找到祖先节点:    /ancestor::父元素名称

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    expect(page.locator('//div[contains(@def,"style01")]/ancestor::div')).to_have_count(2)
    page #断点

xpath:通过子节点的父节点:   在从父节点可以往下找节点

[暂无案例]

xpath:找到节点的多个div 多了一个/

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    expect(page.locator('//div[contains(@def,"style01")]//parent::div')).to_have_count(3)
    page #断点

preceding:当前元素节点标签之前的所有结点。（html 页面先后顺序）

preceding-sibling: 当前元素节点标签之前的所有兄弟结点

following: 找到style03,同级或同级以下的所有元素节点.[只找同级的所有后代节点.]

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    page.locator('//div[contains(@class,"style03")]/following::*')
    page #断点

following-sibling: 找到style03,同级的所有元素节点.[只找同级的所有兄弟节点.]

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    page.locator('//div[contains(@class,"style03")]/following-sibling::*')
    page #断点

following: 找到style03,同级或同级以下的所有input元素节点.

from playwright.sync_api import expect,Page
def test_get_by_locator_css(page: Page):
    page.goto("http://www.code.com/cssxuanzeqi.html")
    page.locator('//div[contains(@class,"style03")]/following::input')
    page #断点

//div[@class="style-d"][last()]

//div[@class="style-d"][last()-1]

//div[@class="style-d"][1]   /不能用first,直接用1就可以.

XPath 元素定位常用方法整理

根据文字寻找元素 xpath=//span [text ()=' 提交 '] 

根据部分文字寻找元素xpath=//span[contains(text(),'提交')]

根据完整 class 属性寻找元素xpath=//span[@class="resourceGroupText ng-binding"]

根据部分 class 属性寻找元素xpath=//span[contains(@class,'resourceGroupText')]

通过唯一元素反向找父元素后再向下定位xpath=//li//span[text()="Stop"]/parent::*/parent::*/span[text()='Start']

根据元素找其后的兄弟元素xpath=//li//span[text()="Stop"]//following-sibling::*/span[text()='Start']

根据元素找其前的兄弟元素xpath=//li//span[text()="Stop"]//preceding-sibling::*/span[text()='Start']

定位下级元素的最后一个xpath=/div[@id="menu"]/div[last()]

定位下级元素的倒数第二个xpath=/div[@id="menu"]/div[last()-1]

从符合条件的元素中取最后一个（按页面顺序）xpath=(//div[@id="menu"]/input)[last()]

根据文本长度定位元素xpath=//span[string-length(text())=10]