Hello Playwright:(6)与元素交互

在上一节我们已经了解到如何定位到元素,那么接下来就可以与元素进行交互了。

ff628c97cbbcf3a3a893450dc39a6929.png

下面的例子都是以百度首页作为测试页面

输入文本

FillAsync方法用于模拟用户选中元素并输入文本,这会触发元素的 input 事件。该方法只适合<input>、<textarea>等可输入的元素。

例如,下面的代码在搜索框中输入文本:

await page.Locator("id=kw").FillAsync("MyIO Hello Playwright");

点击鼠标

ClickAsync方法用于模拟用户点击元素,同时会将元素滚动到浏览器当前可视范围内。

例如,点击搜索按钮:

await page.Locator("id=su").ClickAsync();

悬停鼠标

HoverAsync方法用于模拟用户将鼠标悬停在元素上,同时会将元素滚动到浏览器当前可视范围内。

例如,悬停鼠标在“设置”链接上弹出菜单:

await page.Locator("//*[@id=\"u\"]/a[2]").HoverAsync();

选中单选按钮

CheckAsync方法用于选中和取消选中复选框或单选按钮。

例如,在“搜索设置”窗口将“搜索历史记录”设为显示

await page.Locator("id=sh_1").CheckAsync();

最后整体交互效果如下图:

var playwright = await Playwright.CreateAsync();
var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false, SlowMo = 1000, Channel="chrome", ChromiumSandbox=true  });var page = await browser.NewPageAsync();
await page.GotoAsync("https://www.baidu.com");await page.Locator("id=kw").FillAsync(Guid.NewGuid().ToString());await page.Locator("id=su").ClickAsync();await Task.Delay(2000);await page.Locator("//*[@id=\"u\"]/a[2]").HoverAsync();await page.Locator("//*[@id=\"u\"]/div/a[1]/span").ClickAsync();
await page.Locator("id=sh_1").CheckAsync();

5b5340d0ae736997019b8b1fc330427d.gif

添加微信号【MyIO666】,邀你加入技术交流群

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286121.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

十二、动态座位响应及用户订票《仿淘票票系统前后端完全制作(除支付外)》

一、动态座位设置及发布 首先打开在线编辑器进入我们的项目&#xff1a;https://editor.ivx.cn/ 上一节中已经完成了座位设置的准备&#xff0c;这一节咱们将完成座位设置及发布的功能。 咱们首先给有座位设置事件&#xff1a; 有座位的事件设置当点击后更改当前的内容为0即…

C# 查询大型数据集

LINQ 语法非常好&#xff0c;但其作用是什么&#xff1f;我们只要查看源数组&#xff0c;就可以看出需要的结果&#xff0c;为什么要查询这种一眼就能看出结果的数据源呢&#xff1f;有时查询的结果不那么明显&#xff0c;在下面的示例中&#xff0c;就创建了一个非常大的数字数…

一、博客首页搭建搭建《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、头部导航栏思路参考 首先我们可以查看CSDN的博客首页&#xff0c;从中查看一下布局&#xff1a; 在以上首页中&#xff0c;我们可以得知其顶部为一个整行&#xff0c;这个行内容左侧为一个logo&am…

linux samba服务器

本文转自wanglm51051CTO博客&#xff0c;原文链接&#xff1a; http://blog.51cto.com/studyit2016/1890282&#xff0c;如需转载请自行联系原作者

modernizer的意义

modernizer是一个js文件&#xff0c;会检查当前的浏览器支持什么特性&#xff0c;就在Html标签上添加什么类&#xff0c;然后如果不支持添加no-xxx类&#xff0c;这样&#xff0c;就可以针对两种情况写两种css。 http://blog.chinaunix.net/uid-21633169-id-4286857.html转载于…

Rafy 框架 - 幽灵插件(假删除)

Rafy 框架又添新成员&#xff1a;幽灵插件。本文将解释该插件的场景、使用方法、原理。 场景 在开发各类数据库应用系统时&#xff0c;往往需要在删除数据时不是真正地删除数据&#xff0c;而只是把数据标识为‘已删除’状态。这些数据在业务逻辑上是已经完全删除、不可用的数据…

二、博客首页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、菜单思路参考及制作 在 CSDN 首页中的菜单部分为一串横排的内容&#xff0c;并且可以进行拖动&#xff1a; 首先咱们添加一个行&#xff0c;命名为菜单&#xff1a; 接着肯定是需要设置上下的内边…

现在是2016-09-23,查询2个月后的月份和入职的月份相同的数据

select * from emp where to_char(hiredate,mm)to_char(add_months( sysdate,2),mm); 结果&#xff1a; 转载于:https://www.cnblogs.com/feng666666/p/5900182.html

Git之创建远程分支和删除远程分支

1、创建远程分支browser-1.8.0 在没有创造browser-1.8.0之前,我们先查看下所有分支 git branch -a 可以知道我们目前在browser-1.7.0分支,然后我们创建本地分支browser-1.8.0 git branch browser-1.8.0 再看下所有分支 git branch -a 然后我们再切换到分支browser-1.8.…

ASIHTTPRequest源码简单分析

2019独角兽企业重金招聘Python工程师标准>>> 1.前言 ASIHttprequest 是基于CFNetwork的&#xff0c;由于CFNetwork是比较底层的http库&#xff0c;功能比较少&#xff0c;因此&#xff0c;在ASIHttprequest中实现了http协议中比较多的功能&#xff0c;包括代理、gzi…

【遥感物候】1983-2012年时间序列中国地区GIMMS 3g NDVI下载(已进行旋转、格式转换、投影变换和裁剪)

文章目录 1. 数据集简介2. 数据集预览3. 数据集下载1. 数据集简介 本数据集为1983-2012年,长时间序列中国地区GIMMS 3g NDVI,空间分辨率为0.08333度,作者已完成了数据预处理:包括旋转、格式转换、投影变换和裁剪),作者可以此基础上直接进行NDVI时空变化趋势分析、基于NDV…

三、博客首页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、首页内容分析 此时我们分析一下首页内容&#xff1a; 通过以上内容可以得知&#xff0c;这些内容都统一包含在一个块之内&#xff0c;这个块之内包含了多个内容&#xff0c;这些内容主要是分为标题…

正则表达式 (grep)

正则表达式 (grep) grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具&#xff0c;它能使用正则表达式搜索文本&#xff0c;并把匹配的行打印出来。搜索的结果被送到屏幕&#xff0c;不影响原文…

vuejs 和 element 搭建的一个后台管理界面【收藏】

介绍&#xff1a; 这是一个用vuejs2.0和element搭建的后台管理界面。 相关技术&#xff1a; vuejs2.0&#xff1a;渐进式JavaScript框架&#xff0c;易用、灵活、高效&#xff0c;似乎任何规模的应用都适用。 element&#xff1a;基于vuejs2.0的ui组件库。 vue-router&#xff…

【MATLAB统计分析与应用100例】案例010:matlab调用normrnd函数生成正态分布随机数

效果预览: 文章目录 1. 调用normrnd函数生成1000行3列的随机数矩阵x,其元素服从均值为75,标准差为8的正态分布(1)代码(2)运行效果2. 调用normrnd函数生成1000行3列的随机数矩阵x,其各列元素分别服从不同的正态分布(1)代码(2)运行效果<

四、博客详情页完成《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE&#xff1a;https://editor.ivx.cn/ 一、博客详情页分析 博客详情页大体分为顶部标题、发布时间、作者信息、博文内容&#xff0c;底部的评论我们在此不必做悬浮内容&#xff0c;咱们直接放到博文之下进行显示即可&#xff1b;顶部标题需要…

【原创】erlang 模块之 application

2019独角兽企业重金招聘Python工程师标准>>> kernel-2.15.2 中的内容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 转载于:https://my.oschina.net/moooofly/blog/595122

RabbitMQ详解(三)

一、分发到多Consumer(fanout) 二、Routing路由(Direct) 三、主题路由(Topic)一、分发到多Consumer(fanout)将同一个Message deliver到多个Consumer中。这个模式也被称为"publish/subscribe" 创建一个日志系统&#xff0c;包含两部分&#xff1a;第一部分发出log(Pro…

重磅 | Linux内核5.19初步支持LoongArch架构

经过龙芯中科与内核社区一年多的紧密合作&#xff0c;北京时间2022年6月4日清晨&#xff0c;Linux内核社区正式合并LoongArch架构支持代码。随着Linux-5.19的rc1版本的正式发布&#xff0c;LoongArch体系结构主体部分的源码已合并到内核主线之中&#xff0c;其余相关代码正在进…

【MATLAB统计分析与应用100例】案例011:matlab读取Excel数据,调用regress函数作一元线性回归分析

数据拟合效果预览: 文章目录 1. 读取数据,绘制散点图2. 计算相关系数3. 绘制回归直线4. 剔除异常数据,重新调用regress函数作一元线性回归1. 读取数据,绘制散点图 ClimateData = xlsread(examp08_01.xls); % 从Excel文件读取数据 x &