playwright 元素定位-css选择器

html代码演示案例:cssxuanzeqi.html

css选择器:id选择器:#某某 [#表示ID]  

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("#other")).to_be_visible()
    page #断点

演示图片:

css选择器:class选择器:  .style02[.表示class] 

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(".style02")).to_be_visible()
    page #断点

css选择器:class选择器:  .style.style01[.表示class]  (淘宝案例)-找到小相机标号

.style后面又有一个.style01是什么意思呢: 例如我们想选择样式1,但样式1里面有两个div: calss="style  style01" 它里面会有两个class,两个div中间有一个空格.

那我们class选择器就可以这样写.style.style01 两个class的是and的关系.

两个css条件必须同时满足就可以成功选择:写法1 and

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(".style.style01")).to_be_visible()
    page #断点

两个css条件必须同时满足就可以成功选择:写法2  and

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(".style[style="style05"])).to_be_visible()
    page #断点

两个css条件满足一个就可以成功选择:写法3   or  中间放上一个逗号就可以.

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("#q,.style04)).to_be_visible()
    page #断点

如果我们想找到样式1的下一级样式2的div呢?

向下一个层级,找子层级用">"大于号就可以,这样就可以选择样式2

from playwright.sync_api import expect,Page

def test_get_by_locator_css(page: Page):
    page.goto("http://www.taobao.com")
    expect(page.locator(".style.style01>div")).to_be_visible()
    page #断点

python代码:把后代所有div元素全部选中用" "空格就可以,这样就把样式1,下面的所有div全部选中,不包括url,之选中后面所有的div.

这里的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(".style.style01 div")).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(".style.style01>div>div")).to_be_visible()
    page #断点

选中url元素

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(".style.style01> ul")).to_be_visible()
    page #断点

css排除掉某一个div\剩下的全部选择:这里选择d1 d2 d4,只有d3不被选中

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('.delete div.style-d a:not([data-spm="d3"])')).to_have_count(3)
    page #断点

CSS通过元素标签input选择

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('input[id="username"]')).to_be_visible()
    page #断点

css选择器,只要有属性包含就可以\属性值并没有写全image-se 

 ,原属性值是:image-search-icon    原来的元素标签是:<div class="image-search-icon" data-spm="image_search_icon"></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('[class*="image-se"]')).to_be_visible()
    page #断点

css选择器,只要属性以im开头,就选择

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('[class^="im"]')).to_be_visible()
    page #断点

css选择器,只要属性以con结尾,就选择

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('[class$="con"]')).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('.delete div.style-d:first-child')).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('[data-spm="d4"]')).to_be_visible()
    page #断点

nth选择style-d第三个:

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('.delete div.style-d:nth-child(3)')).to_be_visible()
    page #断点

nth选择style-d只选择偶数

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('.delete div.style-d:nth-child(2n)')).to_be_visible()
    page #断点

nth选择style-d只选择奇数

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('.delete div.style-d:nth-child(2n-1)')).to_be_visible()
    page #断点

nth选择每隔6个减去一个,就是每找6个减去一个,找第五个,就是间隔是5

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('.delete div.style-d:nth-child(6n-1)')).to_be_visible()
    page #断点

其他两个,了解就好(使用中了解)

.delete div.style-d:nth-last-child(1)

.delete div.style-d:nth-of-type(2)')

轴定位 (不推荐，可以了解，特殊情况使用):

~ 具有相同父元素的非紧邻元素

+具有相同父元素的紧邻元素