Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >软件测试|web自动化测试神器playwright教程(二十二)

软件测试|web自动化测试神器playwright教程(二十二)

原创
作者头像
霍格沃兹测试开发Muller老师
发布于 2023-07-31 10:35:02
发布于 2023-07-31 10:35:02
31600
代码可运行
举报
运行总次数:0
代码可运行

前言

工作和生活中,经常会遇到我们需要进行选择的情况,比如勾选,或者我们选择性别,男女两个性别总是不能同时选中的,比如我们在选择兴趣爱好时,我们可以选择多个自己感兴趣的话题,比如篮球足球电竞等话题。我们在执行自动化测试的过程中,必须要学会处理这样的情况。

页面示例

以下面的界面为例:

页面代码如下:

代码语言:html
AI代码解释
复制
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
</head>
<body>
<fieldset>
<legend>单选按钮radio</legend>
<form action="">
    <label for=""><input type="radio" name="brand" value="toyota" id="toyota">丰田</label>
    <label for=""><input type="radio" name="brand" value="volkswagen" id="volkswagen">大众</label>
    <label for=""><input type="radio" name="brand" value="honda" id="honda">本田</label>
    <label for=""><input type="radio" name="brand" value="bmw" id="bmw" checked="">宝马</label>
    <label for=""><input type="radio" name="brand" value="benz" id="benz" >奔驰</label>
</form>
</fieldset>
<br>
<fieldset>
<legend>多选按钮checkbox</legend>
<form action="">
    <input type="checkbox" name="checkbox" value="动力" id="power">动力<br>
    <input type="checkbox" name="checkbox" value="油耗" id="fuel">油耗<br>
    <input type="checkbox" name="checkbox" value="舒适" id="comfort" >舒适 <br>
    <input type="checkbox" name="checkbox" value="驾驶" id="driving" >驾驶 <br>
</form>
</fieldset>
</body>
</html>

playwright选择操作

上述的就是我们最常见的radio单选框和checkbox多选框,playwright提供了一些处理单选框以及多选框的方法,如下:

  • locator.click() 点击操作
  • locator.check() 选中
  • locator.uncheck() 不选中
  • locator.set_checked() 设置选中状态
  • locator.is_checked() 判断是否被选中
  1. radio 单选操作

radio是单选,以我们的html文件为例,如果宝马已经被选了再点击宝马是不会改变状态的,我们只有点击其他的按钮才会改变状态

  • click()点击操作
代码语言:python
代码运行次数:0
运行
AI代码解释
复制
 # radio 操作
    status1 = page.locator('#bmw').is_checked()
    print(status1)
    # 选择奔驰
    page.locator('#benz').click()
    print(page.locator('#benz').is_checked())
  • check() 检查操作
代码语言:python
代码运行次数:0
运行
AI代码解释
复制
 # 选择toyota
    page.locator('#toyota').check()
    print(page.locator('#toyota').is_checked())
  • set_checked()
代码语言:python
代码运行次数:0
运行
AI代码解释
复制
# 选择大众
    page.locator('#volkswagen').set_checked(checked=True)
    print(page.locator('#volkswagen').is_checked())

注:set_checked()需传checked 参数,参数为布尔值

  • 调用page对象
代码语言:python
代码运行次数:0
运行
AI代码解释
复制
page.check('#honda')

page.set_checked('#honda', checked=True)

需注意的是,如果bmw本身就是选择状态,去设置unchecked 状态,会报错: Clicking the checkbox did not change its state,如下

代码语言:python
代码运行次数:0
运行
AI代码解释
复制
page.locator('#bmw').uncheck()

报错如下:

代码语言:python
代码运行次数:0
运行
AI代码解释
复制
    result = next(iter(done)).result()
playwright._impl._api_types.Error: Clicking the checkbox did not change its state
=========================== logs ===========================
waiting for locator("#bmw")
  1. checkbox 复选框

checkbox 复选框跟 radio 操作的区别在于,如果已经被选择了,再点击会被取消选中,所以不会有前面的报错。

  • click(),未选中的时候,点击就会被选中。
代码语言:python
代码运行次数:0
运行
AI代码解释
复制
 # checkbox 操作
    page.locator('#power').click()
    print(page.locator('#power').is_checked())
  • check() 或 set_checked() ,如果想让元素必须是选择状态(不管之前有没被选中),可以使用这两种方法
代码语言:python
代码运行次数:0
运行
AI代码解释
复制
    page.locator('#comfort').check()
    print(page.locator('#comfort').is_checked())

   # checkbox 操作
    page.locator('#driving').set_checked(checked=True)
    print(page.locator('#driving').is_checked())
  • 批量选中checkbox,定位全部CheckBox 批量选中
代码语言:python
代码运行次数:0
运行
AI代码解释
复制
 # checkbox 操作
    box = page.locator('[type="checkbox"]')
    for item in box.all():
        item.check()

总结

本文主要介绍了playwright对选择框的处理,playwright对选择框的处理比selenium更为简单,没有类似selenium的复杂操作,更为直接便捷。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
​前端开发者的 Kotlin 之旅:理解Maven与Kotlin依赖管理
在前面的文章中,我们已经了解了Kotlin的基础语法、核心概念以及Gradle构建系统。作为前端开发者,你可能已经对npm、webpack、yarn等工具非常熟悉,而在Java/Kotlin生态中,Maven是另一个重要的构建工具和依赖管理系统。虽然现代Kotlin项目主要使用Gradle构建,但理解Maven的基本概念仍然很重要,因为整个生态系统中许多概念源自Maven并被Gradle继承。
骑猪耍太极
2025/04/21
1120
​前端开发者的 Kotlin 之旅:理解Maven与Kotlin依赖管理
​前端开发者的 Kotlin 之旅:理解 Gradle关键文件与目录
在深入了解具体文件之前,让我们先建立前端构建工具与 Gradle 之间的概念映射:
骑猪耍太极
2025/04/19
1220
​前端开发者的 Kotlin 之旅:理解 Gradle关键文件与目录
Ktor库使用HTTP编写了一个下载程序
使用 Ktor 库编写一个下载程序也是非常简单的,Ktor 是一个强大的 Kotlin 网络框架,支持 HTTP 请求和响应,适用于构建客户端和服务器应用。
华科云商小徐
2025/03/12
1570
前端开发者的 Kotlin 之旅:理解kotlin协程
对于前端开发者来说,进程、线程和协程的概念可能不太熟悉,因为浏览器和Node.js环境大多抽象了这些低层概念。让我们先来理解这些基本概念:
骑猪耍太极
2025/04/27
1220
前端开发者的 Kotlin 之旅:理解kotlin协程
KMM跨平台开发入门,看这一篇就够了~
近些年,不管是最初的RN还是到现在的Flutter、Compose,他们都在做着一件事——跨平台。
黄林晴
2022/10/24
4.9K0
KMM跨平台开发入门,看这一篇就够了~
《Kotlin 程序设计》第十二章 Kotlin的多线程
Kotlin 1.1 introduced coroutines, a new way of writing asynchronous, non-blocking code (and much more). In this tutorial we will go through some basics of using Kotlin coroutines with the help of the kotlinx.coroutines library, which is a collection of helpers and wrappers for existing Java libraries.
一个会写诗的程序员
2018/08/17
3.4K0
开源|携程机票 App KMM 跨端 KV 存储库 MMKV-Kotlin
作者简介 禹昂,携程移动端资深工程师,专注于 Kotlin 移动端跨平台领域,Kotlin 中文社区核心成员,图书《Kotlin 编程实践》译者。 一、背景 携程机票移动端研发团队自 2021 年始就一直在移动端实践 Kotlin Multiplatform 技术(请见参考链接 1)。由于目前 Kotlin Multiplatform 生态尚处于起步阶段,大部分 Kotlin 开源库都是 JVM only 的,因此在我们团队的日常开发过程中迫切需要一些能够支持 KMM(Kotlin Multiplatf
携程技术
2022/06/17
1.9K0
开源|携程机票 App KMM 跨端 KV 存储库 MMKV-Kotlin
使用Scrapy库结合Kotlin编写爬虫程序
因为Scrapy是一个Python框架,通常用Python来写爬虫。但用户可能希望用Kotlin,这可能是因为他们对Kotlin更熟悉,或者项目需要。
华科云商小徐
2025/04/14
880
《Kotin 极简教程》第14章 使用 Kotlin DSL第14章 使用 Kotlin DSL《Kotlin极简教程》正式上架:
我们在前面的章节中,已经看到了 Kotlin DSL 的强大功能。例如Gradle 的配置文件 build.gradle (Groovy),以及前面我们涉及到的Gradle Script Kotlin(Kotlin)、Anko(Kotlin)等,都是 DSL。我们可以看出,使用DSL的编程风格,可以让程序更加简单干净、直观简洁。当然,我们也可以创建自己的 DSL。
一个会写诗的程序员
2018/08/17
2.3K0
《Kotin 极简教程》第14章 使用 Kotlin DSL第14章 使用 Kotlin  DSL《Kotlin极简教程》正式上架:
前端开发者的 Kotlin 之旅:函数式编程深入
纯函数是函数式编程的核心概念:给定相同输入总是返回相同输出,且没有副作用。这使得代码更可预测、更易测试,也更容易进行并行处理。
骑猪耍太极
2025/05/14
1010
前端开发者的 Kotlin 之旅:函数式编程深入
1 快速开始 《Kotlin Web 开发实战教程》
Like this website, the plugin allows you to create a Ktor project, but with the additional convenience of being fully integrated in the IDE and automatically setting up the project.
一个会写诗的程序员
2019/03/06
1.8K0
用Embassy库编写的自动化下载程序
Embassy 是一个基于 Kotlin 的 HTTP 客户端库,用于简化 HTTP 请求的处理。你可以使用 Embassy 来编写自动化下载程序,类似于其他 HTTP 客户端库。
华科云商小徐
2025/03/13
580
前端开发者的 Kotlin 之旅:Kotlin DSL进阶
DSL(Domain Specific Language)是为特定领域设计的语言。前端世界中的DSL例子包括:
骑猪耍太极
2025/04/30
1400
前端开发者的 Kotlin 之旅:Kotlin DSL进阶
Compose也能开发iOS了,快来体验~
在之前,我们已经体验了Compose for Desktop 与 Compose for Web,目前Compose for iOS 已经有尚未开放的实验性API,乐观估计今年年底将会发布Compose for iOS。同时Kotlin也表示将在2023年发布KMM的稳定版本。
黄林晴
2023/05/31
1.5K0
Compose也能开发iOS了,快来体验~
Kotlin/Native KMM项目架构
Kotlin Multiplatform Mobile ( KMM ) 是一个 SDK,旨在简化跨平台移动应用程序的创建。在 KMM 的帮助下,您可以在 iOS 和 Android 应用程序之间共享通用代码,并仅在必要时编写特定于平台的代码。
libill
2021/10/17
3.4K0
Kotlin/Native KMM项目架构
前端开发者的 Kotlin 之旅:初试Gradle 构建系统
为了学习 Gradle,我们需要一个实际的项目作为载体。Kotlin Multiplatform 项目是一个很好的选择,原因如下:
骑猪耍太极
2025/04/15
1730
前端开发者的 Kotlin 之旅:初试Gradle 构建系统
干货 | 携程机票 App KMM 跨端生产实践
移动端跨平台技术自移动开发诞生以来一直是个热门话题,一是持续关注研发效率,降本提效;二是一套代码多端运行可以提升多端业务逻辑的一致性;三是跨端技术方案通常意味着更佳的高效运维和缺陷修复。
携程技术
2021/12/01
3.9K0
干货 | 携程机票 App KMM 跨端生产实践
重新构想前端开发!Kotlin 推出新功能:无需同时了解 Kotlin 和 JavaScript
整理 | 褚杏娟、核子可乐 近日,JetBrains 发布了 Kotlin 1.8.20 beta 版本,其中包括一项名为“Kotlin/Wasm”的实验性功能,明确将 WebAssembly 设为编译目标。据介绍,新版本依赖于原生 Wasm 垃圾收集功能 WasmGC,后者同样处于早期开发阶段。 JetBrains 总结了 Kotlin/Wasm 的优势: 与 wasm32 Kotlin/Native 目标相比,Kotlin/Wasm 的编译速度更快,因为后者不必使用 LLVM。 由于 Wasm 垃圾收
深度学习与Python
2023/03/29
1.7K0
重新构想前端开发!Kotlin 推出新功能:无需同时了解 Kotlin 和 JavaScript
工具篇 | Gradle入门与使用指南 - 附Github仓库地址
Gradle是一个开源构建自动化工具,专为大型项目设计。它基于DSL(领域特定语言)编写,该语言是用Groovy编写的,使得构建脚本更加简洁和强大。Gradle不仅可以构建Java应用程序,还支持多种语言和技术,例如C++、Python、Android等。
kfaino
2023/09/26
3.7K0
工具篇 | Gradle入门与使用指南 - 附Github仓库地址
深入了解gradle和maven的区别
gradle和maven都可以用来构建java程序,甚至在某些情况下,两者还可以互相转换,那么他们两个的共同点和不同点是什么?我们如何在项目中选择使用哪种技术呢?一起来看看吧。
程序那些事
2021/02/10
9.2K0
推荐阅读
相关推荐
​前端开发者的 Kotlin 之旅:理解Maven与Kotlin依赖管理
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验