playwright——query_selector_all方法详解

query_selector_all(selector)：

1、作用：用于在页面中查询匹配指定 CSS 选择器的所有元素，并将结果按列表返回
2、selector： 是一个 CSS 选择器，用于指定需要查询的元素

3、用途：例如，想要获得一个表单的某一列的所有文本内容等
4、query_selector_all(selector)中可以使用多种选择器和组合方式去定位多层级的元素：
    在编写 selector 选择器时，注意选择器的优先级和匹配顺序
    常见的选择器和组合方式：后代选择器（  ）、子代选择器（ > 或 >> ）、兄弟选择器（ ~ ）、相邻兄弟选择器（ + ）、多个选择器（ ， ）
    1）、后代选择器——用于匹配某个元素的后代元素。    使用 空格 分隔多个选择器。
            eg):匹配页面所有 "class = item" 下的所有 "class = a" 的元素
            elements = page.query_selector_all('.item .a')
            
            
    2）、子代选择器——用于匹配某个元素的子元素,分为两种：
            a)直接子代选择器——用于匹配某个元素的直接子元素。    使用 > 分隔多个选择器。
            b)深度子代选择器——用于匹配某个元素中所有的子孙元素。使用 >> 分隔多个选择器。
                eg1):匹配页面所有 "class = item" 下的所有直接子元素中 "class = a" 的元素
                elements = page.query_selector_all('.item > .a')   #只能匹配到"class = item"下一级"class = a" 的元素，匹配不到 "class = a" 下一级或更深层级 "class = a" 的元素
                eg2):匹配页面所有 "class = item" 下的所有元素中 "class = a" 的元素     
                elements = page.query_selector_all('.item >> .a')  #既能匹配到"class = item"下一级"class = a" 的元素，又能匹配到 "class = a" 下一级或更深层级 "class = a" 的元素
    

    3）、兄弟选择器——用于匹配某个元素之后的所有兄弟元素。   使用 `~` 符号分隔多个选择器。
        （注：兄弟选择器用于选择在同一层级下、紧接在另一个元素后面的元素，即选择该元素后面的所有同级元素。）
         eg):如果我们想要选中第二个 `li` 元素之后的所有兄弟元素
                <li>第一个元素</li>
                <li>第二个元素</li>
                <li>第三个元素</li>
                <li>第四个元素</li>
                <li>第五个元素</li>
            </ul>
        elements = page.query_selector_all('li:nth-child(2) ~ li{/* CSS 样式 */')
        
        
    4）、相邻兄弟选择器——用于匹配某个元素之后的第一个兄弟元素。    使用 `+` 符号分隔多个选择器。
        eg):匹配页面所有 "class = item" 下的元素中的第一个 "span" 的元素
        elements = page.query_selector_all('.item + span')
        
    
    5）、多个选择器——用于匹配多个选择器所对应的元素。    使用","分隔多个选择器。
        eg):匹配页面所有 "class = item" 下所有 "div" 元素和所有 "span" 的元素
        elements = page.query_selector_all('.item div, .item span')

注意点：
1）、在使用query_selector_all(selector)方法时需要注意确保元素已经加载完成。所以可以在使用过程中添加必要的元素等待语句或者等待页面加载完成等语句
2）、直接子代选择器，即匹配某个元素的下一级匹配元素，只能匹配到下一级，无法匹配到下一级的下一级
     深度子代选择器，即匹配某个元素的下级所有匹配元素，匹配多少层级都可以匹配到。（包括间接子代元素）
3）、兄弟选择器只能选择在同一层级下的元素，即它们具有相同的父元素。此外，兄弟选择器只能选择在该元素后面的兄弟元素，而不能选择在该元素前面的兄弟元素。
     page.query_selector_all(".el-table__body-wrapper .el-table__row:nth-child(3) ~ .el-table__row .painet_table_info_surename")  #.el-table__row:nth-child(3) ~ 后要写他的同级.el-table__row 
4）、query_selector_all()方法返回的是一个列表，即使只有一个匹配的元素，也需要使用下标 `[0]` 来访问该元素。如果未查询到任何元素，该方法将返回一个空列表。
5）、query_selector_all()方法返回一个列表，可以对列表进行后续操作，例如：访问每个元素的属性和方法，获取元素的文本
6）、:nth-child(n)——表示第n个元素
7）、filter()方法在query_selector_all()中的使用：
        query_selector_all()方法中，可以使用 `filter` 参数传递筛选条件。使用 `{"has_text": "text"}` 来指定筛选条件，表示选择所有文本内容中包含 `"text"` 的元素。
        page.query_selector_all(".item div", filter={"has_text": "text"})


以上是我再学习过程中做的一些总结笔记，希望能帮到您！