1.简介

在实际自动化测试过程中,我们也避免不了会遇到下拉框选择的测试,因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助。今天,我们讲下playwright的下拉框怎么处理,在使用selenium定位的过程中,我们可以选择使用selenium的Select类定位操作选择框(比较复杂),但是在playwright中真的炒鸡方便。

2.什么是下拉选择框

下拉框是一种常见的用户交互界面控件,一般用于向用户显示多项可选项,并从中让用户选择一个最佳答案。用户可以从下拉框内的给定列表中选择一项,从而输入对应内容,可以让Web设计师快速实现可空白集成以及简便操作,简化用户输入。

下拉框可以有不同的布局和表现形式。例如,普通的下拉框由复选框和滚动条组成,可以用来让用户在多个选择项中进行选择。也可以使用下拉框来处理大数据,使搜索变得更快。还有一种下拉框布局容纳输入框,提高用户输入效率。

下拉框有很多种优点。首先,它可以美化Web界面和节省空间,将多项选择以垂直形式呈现,节省空间。其次,它可以帮助保护用户免受错误输入,只能从列表内选择,从而避免用户输入错误的数据,如拼写错误的文本。此外,下拉框可以简化用户C(Control)操作,提高操作效率,更容易操作和反映用户意图。

更重要的是,下拉框可以帮助减少用户输入时间,并减少干扰,避免用户在全部文本选项中搜索。特别是在输入大量资料时,可以减少完成这项任务所需的时间,从而提高用户对网页的使用体验。

总之,下拉框在网页设计中经常使用,它具有很多优点,可以美化Web界面,提高用户的输入效率,减少用户的输入时间,帮助用户更好地控制后台系统,并降低错误录入的可能性。

3.Select用法

在Playwright中使用locator.select_option()选择元素中的一个或多个选项。我们可以指定选项value,或label选择并且可以选择多个选项。官方使用示例如下:

#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.1select元素示例

1.准备测试练习select.html,如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试Select</title>
    <style type="text/css">
        .button1 {
            background-color: #f44336; 
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 28px;
            margin-bottom: 100px;
            text-decoration:none;
            color: white;
        }
        #myAnchor
        {
          text-decoration:none;
          color: white;
        }
    </style>
</head>
<body>
 <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br>
    快递邮寄地址:
    <select id="select_id" name="select_name" class ="select_cls">
        <option value="0">请选择</option>
        <option value="1">山西</option>
        <option value="2">陕西</option>
        <option value="3">山东</option>
        <option value="4">四川</option>
        <option value="5">河北</option>
    </select>省_XXX_市_ XXX_街道
</body>
</html>

2.页面效果,如下图所示:

3.2仿照官方示例

#single selection matching the value or label
element.select_option("1")#single selection matching the label
element.select_option(label="山东")#select_name selection for 0, 1 and second option
element.select_option(value=["0","1", "2", "3","4","5"])

3.3操作select选择框

3.3.1语法

第一种方法:通过page对象直接调用,如下:

page.select_option(selector,value)        #通过value选择
page.select_option(selector,index)        #通过index选择
page.select_option(selector,label)        #通过label选择

以上方法是:使用selector选择器,先定位元素

第一种通过value选择,顾名思义,可以通过我们的选择框的value元素进行选择
第二种通过index选择,意思是我们可以通过下标来选择
第三种通过label选择,意思是我们可以通过选项值来选择

第二种方法:先定位select元素,再定位选项,如下:

select = page.get_by_label("选择:")
select.select_option(label
="forth")

4.牛刀小试

4.1先定位select元素,再定位选项

首先宏哥准备一个测试demo的html,因为在线的不好找或者不满足要演示的要求。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试Select</title>
    <style type="text/css">.button1 {
background
-color: #f44336; border: none;
color: white;
padding: 15px 32px;
text
-align: center;
text
-decoration: none;
display: inline
-block;
font
-size: 28px;
margin
-bottom: 100px;
text
-decoration:none;
color: white;
}
#myAnchor {
text
-decoration:none;
color: white;
}
</style> </head> <body> <button class="button1"><a id="myAnchor" href="https://www.cnblogs.com/du-hong/">北京-宏哥</a></button></br> <label>快递邮寄地址:<select id="select_id" name="select_name" class ="select_cls"> <option value="0">请选择</option> <option value="1">山西</option> <option value="2">陕西</option> <option value="3">山东</option> <option value="4">四川</option> <option value="5">河北</option> </select>省_XXX_市_ XXX_街道</label> </body> </html>
4.1.1根据选项名称定位

1.参考代码


# coding=utf-8

标签: none

添加新评论