【python自动化】Playwright基础教程(四)事件操作①高亮元素匹配器鼠标悬停

news2024/11/26 12:00:30

本文目录

文章目录

    • 前言
    • 高亮显示元素定位 - highlight
      • highlight实战
      • highlight定位多个元素
    • 元素匹配器 - nth
      • nth实战演示
    • 元素匹配 - first&last

综合定位方式+时间操作进行实战,巩固之前我们学习的定位方式。

这一部分内容对应官网 : https://playwright.dev/python/docs/api/class-locator

这里挑一部分用的比较多,或者说比较实用的事件操作进行讲解,结合代码截图。

说明:事件操作这里的Locator表示定位方式,而不是locator()这个方法。上节内容我们讲到的所有定位操作都属于这个locator定位方式。

定位操作文章:【python自动化】Playwright基础教程(三)定位操作

前言

由于本文是结合实际代码操作,为了避免重复操作等麻烦步骤,这里我使用playwright连接指定浏览器,手动进入相关网址,页面直接进行相关事件操作。

playwright如何连接指定浏览器详见前文:playwright连接已有浏览器操作

简单步骤:

1、指定端口启动谷歌浏览器,mac同理(到本机安装的chrome.exe根目录下执行)

chrome.exe --remote-debugging-port=9223

2、使用connect_over_cdp方法进行连接

__author__ = "梦无矶小仔"

from playwright.sync_api import sync_playwright, Page, BrowserContext


class Demo05:
    def __init__(self):
        """
        使用playwright连接谷歌浏览器
        :return:
        """
        self.playwright = sync_playwright().start()
        # 连接已经打开的浏览器,找好端口
        browser = self.playwright.chromium.connect_over_cdp("http://127.0.0.1:9223")
        self.default_context = browser.contexts[0]
        self.page = self.default_context.pages[0]
    
    # 教程中每个事件操作我都会在这里新建方法
    def highlight(self):
        ...
        
if __name__ == '__main__':
    mwj = Demo05()
    # 高亮代码 (这里启用对应的事件方法)
    mwj.highlight()

3、如果上面的方法不会,那就用如下代码,只不过每次要自己更换url和相关页面地址,不能随心所欲的控制。

from playwright.sync_api import sync_playwright

class Demo06:
    def __init__(self, url):
        playwright = sync_playwright().start()
        browser = playwright.chromium.launch(headless=False)
        context = browser.new_context()
        self.page = context.new_page()
        self.page.goto(url)
	
    # 教程中每个事件操作我都会在这里新建方法
    def highlight(self):
        self.page.locator("#kw").highlight()


if __name__ == '__main__':
    url = "https://www.baidu.com"
    mwj = Demo06(url=url)
    # 高亮代码 (这里启用对应的事件方法)
    mwj.highlight()

高亮显示元素定位 - highlight

在我们调试元素定位的时候,不知道页面上有多少个此类元素,不清楚页面上这个元素具体显示在什么位置,这时候就可以使用 locator.highlight()

使用方法:

locator.highlight()

highlight实战

**需求:**高亮百度的搜索框(搜索框的元素id为kw)

网页对应代码:

<input id="kw" name="wd" class="s_ipt" value="梦无矶" maxlength="255" autocomplete="off">

示列代码:

def highlight(self):
    self.page.locator("#kw").highlight()

效果展示:

image-20230912171416170

我们可以看到搜索框这个元素全部高亮显示了,并且会在元素下方注明你写的元素定位方式。

highlight定位多个元素

还是上面这个页面,我们看到页面有非常多的梦无矶,我们使用如下代码再次高亮我们的元素。

def highlight(self):
    # self.page.locator("#kw").highlight()
    self.page.get_by_text("梦无矶").highlight()

效果展示:

image-20230912173857286

这对于我们调试元素定位,是不是炒鸡方便?

元素匹配器 - nth

将定位器返回到第n个元素。下标是从0开始的。nth(0)表示选择第一个元素。

使用方法

banana = page.get_by_role("listitem").nth(2)

nth实战演示

依旧使用上面的梦无矶作为展示,我们定位第二个梦无矶,并且让它高亮显示。

def nth_mwj(self):
    # 定位第二个梦无矶,并且高亮该元素
    self.page.get_by_text("梦无矶").nth(1).highlight()

效果显示

image-20230913161606789

元素匹配 - first&last

  • nth同理,first就是匹配第一个,last就是匹配最后一个。
  • first等同于nth(0)
  • last等同于nth(-1)
  • 使用方法和nth一样

代码示列

def nth_mwj(self):
    # 定位第二个梦无矶,并且高亮该元素
    self.page.get_by_text("梦无矶").nth(1).highlight()
    # 使用first定位第一个
    self.page.get_by_text("梦无矶").first.highlight()
    # 使用last定位最后一个
    self.page.get_by_text("梦无矶").last.highlight()

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

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

相关文章

⑦【MySQL】什么是约束?如何使用约束条件?主键、自增、外键、非空....

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 约束 ⑦【MySQL】约束条件1. 约束的基本使用2.…

5.运行时数据区-字符串常量池、程序计数器、直接内存

目录 概述字符串常量池字符串常量池存储数据的方式三种常量池字面量与符号引用 哈希表实战 程序计数器直接内存直接内存与堆内存比较 结束 概述 相关文章在此总结如下&#xff1a; 文章地址jvm基本知识地址jvm类加载系统地址双亲委派模型与打破双亲委派地址运行时数据区地址 …

Spring事务之AOP导致事务失效问题

情况说明 首先开启了AOP&#xff0c;并且同时开启了事务。下面这个TransactionAspect就是一个简单的AOP切面&#xff0c;有一个Around通知。 Aspect Component public class TransactionAspect {Pointcut("execution(* com.qhyu.cloud.datasource.service.TransactionSe…

数据结构-链表的简单操作代码实现2【Java版】

目录 写在前&#xff1a; 此篇讲解关于单链表的一些面试题目&#xff0c;续上节。 11.反转一个单链表 12.给定一个带有头结点的head的非空单链表&#xff0c;返回链表的中间结点&#xff0c;如果有两个中间结点&#xff0c;则返回第二个中间结点 13.输入一个链表&#xff0c…

Nginx 使用笔记大全(唯一入口)

Linux服务器因为Nginx日志access.log文件过大项目无法访问 项目处于运行状态下无法访问&#xff0c;第一步查看磁盘状态 1、查看磁盘状态 df -h 2、查找100M以上的文件 find / -size 100M |xargs ls -lh 3、删除文件 rm -rf /usr/local/nginx/logs/access.log 4、配置nginx.…

Linux 性能调优之硬件资源监控

写在前面 考试整理相关笔记博文内容涉及 Linux 硬件资源监控常见的命名介绍&#xff0c;涉及硬件基本信息查看查看硬件错误信息查看虚拟环境和云环境资源理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#x…

centos7下载python3离线安装包

下载离线安装工具 yum install yum-utils -y下载python3离线安装包 yumdownloader --destdir/root/python3 --resolve python3将python3下面的离线安装文件拷贝到其他服务器上就可以安装 离线安装 先进入到离线程序rpm文件存储路径 # 离线安装 rpm -Uvh --force --nodep…

Cnyunwei

运维管理系统&#xff1a;监控系统 Cnyunwei Centos 6 封装 Cacti、Nagios、Centreon&#xff08;中英文自己切换&#xff09;、Check_MK、Nconf英文版本全部采用与国外官方同步的最新版本&#xff0c;会发布32位和64位两个版本。 安装很简单&#xff0c;直接回车即可全自动安…

AttributeError: module ‘matplotlib‘ has no attribute ‘get_data_path‘

【报错】使用 AutoDL 下 Notebook 调用 matplotlib 时遇到 AttributeError: module matplotlib has no attribute get_data_path 报错&#xff1a; --------------------------------------------------------------------------- AttributeError …

《深入浅出进阶篇》——空间换时间优化——P2671 求和

链接&#xff1a;https://www.luogu.com.cn/problem/P2671 上题干&#xff1a; 题目描述 一条狭长的纸带被均匀划分出了n个格子&#xff0c;格子编号从11到n。每个格子上都染了一种颜色colori​用[1,m]当中的一个整数表示&#xff09;&#xff0c;并且写了一个数字numberi​。…

asp.net core mvc之 布局

一、布局是什么&#xff1f; 布局是把每个页面的公共部分&#xff0c;提取成一个布局页面&#xff08;头、导航、页脚&#xff09;。 二、默认布局 _Layout.cshtml 默认的布局是在 /Views/Shared 目录的 _Layout.cshtml文件。通常Shared目录中的视图都是公共视图。该目录下的…

部分背包问题【贪心算法】

部分背包问题是一种经典的贪心问题&#xff0c;物品可以取一部分&#xff0c;也就是可以随意拆分的物品。 算法思路&#xff1a; 用列表保存每个物品的价值及总重量、平均价值&#xff08;性价比&#xff09;。输入数据同时计算每种物品的平均价值。使用自定义的compare函数以…

PADS快速调整器件的位号

选择元器件&#xff0c; ctrlA 全选器件&#xff0c;右击菜单选择特性 如下三个信息&#xff0c;确认 配置标签信息&#xff0c;如图界面信息&#xff0c;点击应用&#xff0c;器件全部归位

Slax Linux 强化了会话管理和引导参数选项

导读Slax Linux 的创始人和维护者Tomas Matejicek 宣布 了他的微型和便携 GNU/Linux 发行版的新版本&#xff0c;带来了各种增强和错误修复。 新的 Slax Linux 版本&#xff08;基于 Debian 的 12.1 版本和基于 Slackware 的 15.0.2 版本&#xff09;引入了在可写设备上运行发…

vue3 ref 与shallowRef reactive与shallowReactive

ref 给数据添加响应式&#xff0c;基本类型采用object.defineProperty进行数据劫持&#xff0c;对象类型是借助reactive 实现响应式&#xff0c;采用proxy 实现数据劫持&#xff0c;利用reflect进行源数据的操作 let country ref({count:20,names:[河南,山东,陕西],objs:{key…

AI大模型时代,开发工程师与项目管理者面对的机遇和挑战,文末送书3本

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…

centos7 在线安装python3

在线安装命令 yum install -y python3 输入命令之后等待安装完成 查看版本 查看版本3 输入命令 python3 看到版本号为3.6.8 查看版本2 输入命令 python2 看到版本号为2.7.5

网络运维Day13

文章目录 部署web服务器部署虚拟机web1安装依赖包解压NGINX压缩包初始化编译编译安装查看验证配置动静分离 部署虚拟机web2安装依赖包解压NGINX压缩包初始化编译编译安装查看验证配置动静分离 配置NGINX七层代理测试健康检查功能 配置NGINX四层代理部署代理服务器 总结 部署web…

vue中cli组件如何自定义定义

目录 创建自定义组件 注册并使用自定义组件 注册组件&#xff1a; 在需要使用该组件的页面或父组件中注册并引入自定义组件。 使用 Props 传递数据 总结步骤&#xff1a; 前言 在Vue CLI中使用自定义组件是构建交互式和模块化Web应用的重要一环。Vue CLI为开发者提供了使用…