1.简介
上一篇中宏哥主要讲解和分享了一下，我们常见或者传统的select下拉框的操作，但是近几年又出现了了一种新的select下拉框，其和我们传统的select下拉框完全不一样，那么我们如何使用playwright对其进行定位操作了。宏哥今天就来讲解和分享一下仅供大家参考，不喜勿喷。
2.新的select
宏哥发现随着技术的更新换代，现在好多下拉选择都很少用以前那种的方式，而是采用一种类似pop弹出的效果，直接弹出一个一个页面选择，如下图所示：
购票网站：
快递填写地址：
3.Select用法
在Playwright中使用locator.select_option()选择元素中的一个或多个选项。我们可以指定选项value，或label选择并且可以选择多个选项。官方使用示例如下：
代码语言：javascript复制# Single selection matching the value
page.get_by_label('Choose a color').select_option('blue')
# Single selection matching the label
page.get_by_label('Choose a color').select_option(label='Blue')
# Multiple selected items
page.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue'])3.1操作select选择框
3.1.1语法
第一种方法：通过page对象直接调用，如下：
代码语言：javascript复制page.select_option(selector,value) # 通过value选择
page.select_option(selector,index) # 通过index选择
page.select_option(selector,label) # 通过label选择以上方法是：使用selector选择器，先定位元素
第一种通过value选择，顾名思义，可以通过我们的选择框的value元素进行选择
第二种通过index选择，意思是我们可以通过下标来选择
第三种通过label选择，意思是我们可以通过选项值来选择
第二种方法：先定位select元素，再定位选项，如下：
代码语言：javascript复制select = page.get_by_label("选择:")
select.select_option(label="forth")4.牛刀小试
宏哥这里就宏哥这里就以12306网站为例查询北京到上海的列车信息。给小伙伴们或者童鞋们来打个样。但是实际操作中发现利用select操作的方法有点繁琐，还是用常规方法非常简单。
具体步骤： 1.首先访问12306网站。
2.定位到出发地，点击，弹出选项，定位要选择的选项，点击即可。
3.定位到到达地，点击，弹出选项，定位要选择的选项，点击即可。
4.日期默认查询当天的，宏哥这里不定位，后期会专门讲解定位日期控件的。
5.点击查询按钮，查询车次信息。
4.1代码设计
4.2参考代码
代码语言：javascript复制# coding=utf-8
