Python+Playwright常用元素定位方法

CSS selector选择器

在CSS中，定位元素主要通过选择器完成，以下是几种常见的CSS选择器定位方法：

1. 标签选择器(element):

        直接使用HTML元素名称来定位，例如 p 会选择所有段落元素。

1. 属性选择器(attribute):

     选择所有具有指定属性的元素，无论该属性的值是什么。例如，[title] 会选择所有包含 title 属性的元素。

     选择具有指定属性，并且该属性值完全等于给定值的元素。例如，[type="submit"] 会选择所有 type 属性值为 "submit" 的元素。

     选择具有指定属性，且属性值中任意位置包含给定值的元素。例如，[class*="highlight"] 会选中所有 class 属性值中包含 "highlight" 文本的元素。

     选择具有指定属性，且属性值以给定值开始的元素。例如，[href^="https://"] 会选择所有 href 属性值以 "https://" 开头的链接。

     选择具有指定属性，且属性值以给定值结束的元素。例如，[class$="-active"] 会选中所有 class 属性值以 "-active" 结尾的元素。

     选择具有指定属性，且属性值是以空格分隔的值列表中包含给定值的元素。例如，[class~="warning"] 会选中所有 class 属性中包含 "warning" 作为单独项的元素。

     选择具有指定属性，且属性值要么正好等于给定值，要么以给定值后跟连字符("-")的元素。这常用于语言属性的匹配，如 [lang|="en"] 会选中 lang 属性为 "en" 或 "en-" 开头的语言设定。

   1. 存在属性选择器 [attribute]:

   2. 等于属性值选择器 [attribute="value"]:

   3. 包含属性值选择器 [attribute*="value"]:

   4. 开始属性值选择器 [attribute^="value"]:

   5. 结束属性值选择器 [attribute$="value"]:

   6. 子串属性值选择器 [attribute~="value"]:

   7. 前缀属性值选择器 [attribute|="value"]:

1. 类选择器 (.class)：使用点.加上类名来定位具有指定类的元素，如 .container 定位所有class为"container"的元素。

2. ID选择器 (#id)：使用井号#加上ID名来定位具有唯一ID的元素，例如 #header 定位ID为"header"的元素。

3. 后代选择器 (ancestor descendant)：通过空格分隔两个选择器，定位作为祖先元素后代的所有元素，如 div p 定位所有div内的p元素。

4. 子代选择器 (parent > child)：使用大于号>定位直接子元素，如 ul > li 定位所有作为ul直接子元素的li。

5. 相邻兄弟选择器 (prev + next)：通过加号+定位紧邻在另一个元素后的元素，如 h1 + p 定位所有紧跟在h1之后的段落。

6. 一般兄弟选择器 (prev ~ siblings)：通过波浪线~定位在另一个元素后同级的所有元素，如 h1 ~ p 定位所有h1之后的同级段落。

7. 属性选择器 ([attribute], [attribute=value], [attribute~=value], [attribute|=value], [attribute^=value], [attribute$=value], [attribute*=value])：用于选择具有特定属性或属性值的元素，如 [type="text"] 定位所有type属性为"text"的输入元素。

8. 伪类选择器 (:hover, :active, :focus, :first-child, :last-child, :nth-child(n) 等)：用于定位元素基于状态或其在文档中的位置，如 a:hover 定位鼠标悬停时的链接。

9. 伪元素选择器 (::before, ::after, ::first-letter, ::first-line)：用于插入生成的内容或装饰元素的特定部分，如 p::first-letter 为段落首字母添加样式。

Xpath 元素位置定位：

XPath 提供了强大的元素定位方法，以下是几种常用的定位方法：

1. 通过标签名定位：

     定位文档根下的直接标签：/html

   1. 例如，定位所有的

      标签：//p

2. 通过属性定位：

3. 定位具有特定属性的元素，如class为"example"的

   ：//div[@class="example"]

4. 定位包含特定属性值的元素，不区分属性值大小写：//div[contains(@class, "example")]

5. 通过文本内容定位：

   1. 定位包含特定文本的元素：//a[text()="点击这里"]

   2. 使用模糊匹配：//a[contains(text(), "点击")]

6. 结合多条件定位：

   1. 同时满足多个条件：//div[@class="result" and @id="special"]

   2. 满足其中任意条件：//div[@class="result" or @id="special"]

7. 父、子、兄弟选择器：

   1. 父元素：../ 或使用axes，如 ancestor::tagname

   2. 子元素：child::tagname 或直接 tagname 在路径中表示（如 //div/p）

   3. 后续兄弟：following-sibling::tagname

   4. 前驱兄弟：preceding-sibling::tagname

8. 序号选择：

   1. 第一个元素：//tagname[1]

   2. 最后一个元素：//tagname[last()]

   3. 第n个元素：//tagname[n]

9. 使用XPath函数：

   1. 以特定字符串开头：//h2[starts-with(text(), "Introduction")]

   2. 包含另一个字符串：//a[contains(@class, "nav-link")]

Role 元素角色定位：

示范：

# 标准role属性
page = '''

 您已成功注册，很快您将收到一封确认邮件！

'''
page.get_by_role('alert')

# 还可以给元素添加ARIA属性
page = '''
标题1
标题2
'''
page.get_by_role('alert',level=1)

# 某些标签包含可见文本，隐含Acessible Name属性
page = '''
百度

''' page.get_by_role('link',name='百度') page.get_by_role('link',name='百')

1. 某些标签隐含role属性

   1. 标签，隐含 role="progress" 的属性

   2. 标签，隐含 role="searchbox" 的属性

2. 某些标签隐含ARIA属性

   1. 标签，隐含 role="heading" aria-level="1" 的属性

   2. 标签，隐含 role="heading" aria-level="2" 的属性

3. 某些标签隐含Acessible Name属性

   1. Subscribe标签，隐含 role="checkbox" name="Subscribe" 的属性

   2. Subscribe标签，隐含 role="checkbox" name="Subscribe" 的属性

更多规则，参考：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role

通过用户视觉定位：

示范：

page = '''

'''
page.get_by_placeholder('bai')
page.get_by_placeholder('baidu',exact=True) # 内容完全一致可以加上 exact=True 参数

通过label元素关联定位：

示范：

page = '''

Password

'''
page.get_by_label('Username')
page.get_by_label('Password')

通过元素的 alt text定位

示范：

page = '''

'''
page.get_by_alt_text('example')
page.get_by_alt_text('example_button',exact=True)

通过元素的 title 定位

示范：

page = '''

'''
page.get_by_alt_title('示范网站首页')