北京-宏哥的博客

上一篇中宏哥主要讲解和分享了一下，我们常见或者传统的select下拉框的操作，但是近几年又出现了了一种新的select下拉框，其和我们传统的select下拉框完全不一样，那么我们如何使用playwright对其进行定位操作了。宏哥今天就来讲解和分享一下仅供大家参考，不喜勿喷。

在日常工作中，我们会遇到需要使用不同的硬件设备测试兼容性的问题，尤其是现在手机型号基本上是每个厂家每年发布一款新机型，而且手机的屏幕大小分辨率五花八门的，我们基本不可能全部机型都用真机测试一遍，playwright提供了模仿机型的功能，我们可以使用playwright来模拟设备。使用 Playwright，你可以在任何浏览器上测试你的应用程序，也可以模拟真实设备，例如手机或平板电脑。

在我们日常工作中进行UI自动化测试时，保证测试的稳定性至关重要。其中一个关键方面是正确地定位和操作网页中的元素。在网页中，元素可能处于不同的状态，有些可能在页面加载完成之前不在DOM中，需要某些操作后才会出现，而其他元素可能一直存在于DOM中，但最初处于隐藏状态，需要通过操作才能使其出现进而处于可见状态。因此如果在执行脚本时没有考虑到元素的状态，很可能导致脚本执行失败。为了保证自动化测试的稳定性，我们需要确保在执行操作之前，所需的元素已经达到了指定状态。

上一篇宏哥想了好多办法都没有演示成功的拖拽Canvas元素，宏哥也说的太绝对了，给大家造成困惑或者误导。一连好几天吃饭睡觉都不怎么香了，脑子中始终对这件事耿耿于怀，自己问自己难道就真的没有办法了吗？突然想到了一种办法抱着试一下的心态，结果出乎意料但是又在情理之中：成功推拽了！！！此刻地心情无以言表，直接来睡一篇Canvas元素拖拽的番外篇来分享一下宏哥的喜悦心情。好了言归正传下边进入今天的主题。

今天宏哥分享的在实际测试工作中很少遇到，比较生僻，如果突然遇到我们可能会脑大、懵逼，一时之间不知道怎么办？所以宏哥这里提供一种思路供大家学习和参考。svg也是html5新增的一个标签，它跟canvas很相似。都可以实现绘图、动画。但是svg绘制出来的都是矢量图，不像canvas是以像素为单位的，放大会模糊。svg绘制出来的图是不会的。SVG英文全称为Scalable vector Graphics，意思为可缩放的矢量图，这种元素比较特殊，需要通过 ​name​() 函数来进行定位。

今天宏哥分享的在实际测试工作中很少遇到，比较生僻，如果突然遇到我们可能会脑大、懵逼，一时之间不知道怎么办？所以宏哥这里提供一种思路供大家学习和参考。svg也是html5新增的一个标签，它跟canvas很相似。都可以实现绘图、动画。但是svg绘制出来的都是矢量图，不像canvas是以像素为单位的，放大会模糊。svg绘制出来的图是不会的。SVG英文全称为Scalable vector Graphics，意思为可缩放的矢量图，这种元素比较特殊，需要通过 ​name​() 函数来进行定位。

有些页面元素的生命周期如同流星一闪，昙花一现。我们也不知道这个元素在没在页面中出现过，为了捕获这一美好瞬间，让其成为永恒。我们就来判断元素是否显示出现过。在操作元素之前，可以先判断元素的状态。判断元素操作状态也可以用于断言。# 自定义方法来判断页面元素是否存在"""判断指定选择器的元素是否存在于页面上:param page: Playwright的Page对象:param selector: 用于选择元素的CSS选择器:return: 如果元素存在返回True，否则返回False"""

对于前端隐藏元素，一直是自动化定位元素的隐形杀手，让人防不胜防。脚本跑到隐藏元素时位置时报各种各样的错误，可是这种隐藏的下拉菜单又没有办法避免，所以非常头痛，这一篇只为交流隐藏元素自动化定位处理方法以及宏哥自己的一点浅薄见解。隐藏元素，熟悉前端的或者HTML的小伙伴或者童鞋们一定不陌生，元素的属性隐藏和显示，主要是 type="hidden"和style="display: none;"属性来控制的，当然了还有其他的方法控制，宏哥这里就不详细说明了，有兴趣的小伙伴或者童鞋们可以自己查一下资料。

有些页面元素的生命周期如同流星一闪，昙花一现。我们也不知道这个元素在没在页面中出现过，为了捕获这一美好瞬间，让其成为永恒。我们就来判断元素是否显示出现过。在操作元素之前，可以先判断元素的状态。判断元素操作状态也可以用于断言。

有些页面元素的生命周期如同流星一闪，昙花一现。我们也不知道这个元素在没在页面中出现过，为了捕获这一美好瞬间，让其成为永恒。我们就来判断元素是否显示出现过。在操作元素之前，可以先判断元素的状态。判断元素操作状态也可以用于断言。

前边几篇文章讲解完如何上传文件，既然有上传，那么就可能会有下载文件。因此宏哥就接着讲解和分享一下：自动化测试下载文件。可能有的小伙伴或者童鞋们会觉得这不是很简单吗，还用你介绍和讲解啊，不说就是访问到下载页面，然后定位到要下载的文件的下载按钮后，点击按钮就可以了。其实不是这样的，且听宏哥徐徐道来：宏哥这里的下载是去掉下载弹框的下载。

前边的三篇文章基本上对文件上传的知识介绍和讲解的差不多了，今天主要是来分享宏哥在文件上传的实际操作中发现的一个问题：input控件和非input控件的上传API对其都可以上传成功。废话不多说直接进入正题。input控件API上传成功和非input控件API上传成功的原因是：宏哥刚好定位的是input控件，而且这个input控件点击后会弹出文件选择对话框事件，所有两种方法都可以。

前边的两篇文章中，宏哥分别对input控件上传文件和非input控件上传文件进行了从理论到实践地讲解和介绍，但是后来又有人提出疑问，前边讲解和介绍的都是上传一个文件，如果上传多个文件，Playwright是如何实现的呢？宏哥看了一下官方的API也有上传多个文件的API，那么今天就来讲解和介绍一下这个知识点。

在实际工作中，我们进行web自动化的时候，文件上传是很常见的操作，例如上传用户头像，上传身份证信息等。所以宏哥打算按上传文件的分类对其进行一下讲解和分享。在web系统中，文件上传功能有的是非标准的上传文件功能（非input控件上传），什么是非标准的文件上传功能，我们来看下图的文件上传功能，如下图所示：在上图中，选择文件按钮对应的html源码中标签为img，这种元素就是非标准的上传功能。

在实际工作中，我们进行web自动化的时候，文件上传是很常见的操作，例如上传用户头像，上传身份证信息等。所以宏哥打算按上传文件的分类对其进行一下讲解和分享。

面包屑（Breadcrumb），又称面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉访问者他们在网站中的位置以及如何返回，是在用户界面中的一种导航辅助。它是用户一个在程序或文件中确定和转移他们位置的一种方法。和童话故事里的一样，面包屑是一个网站或者app中为用户指引其所处位置的第二导航系统。

在日常的自动化测试工作中进行断言的时候，我们可能经常遇到的场景。从一个字符串中找出一组数字或者其中的某些关键字，而不是将这一串字符串作为结果进行断言。这个时候就需要我们对字符串进行操作，宏哥这里介绍两种方法：正则和字符串切片函数split()。

在日常的自动化测试工作中进行断言的时候，我们可能经常遇到的场景。从一个字符串中找出一组数字或者其中的某些关键字，而不是将这一串字符串作为结果进行断言。这个时候就需要我们对字符串进行操作，宏哥这里介绍两种方法：正则和字符串切片函数split()。

有些页面的内容不是打开页面时直接加载的，需要我们滚动页面，直到页面的位置显示在屏幕上时，才会去请求服务器，加载相关的内容，这就是我们常说的懒加载。还有就是在日常工作和学习中，经常会遇到我们的页面内容较多，一个屏幕范围无法完整展示内容，我们就需要滚动滚动条去到我们想要的地方，所以有时候我们就需要操作滚动条向下滚动的操作。其实前边的文章也提到过滚动条的操作，今天主要是将各种宏哥知道的方法进行一下汇总和总结，方便大家查找和学习。

在之前的文章中宏哥讲解和分享了，为了看清自动化测试的步骤，通过JavaScript添加高亮颜色，就可以清楚的看到执行步骤了。在学习和实践Playwright的过程中，偶然发现了使用Playwright中的highlight()方法也突出显示Web元素。与之前的方法有异曲同工之妙。而且很简单。highlight()方法可以突出显示Web元素，方便调试和可视化操作。

在日常工作和学习中，自动化测试的时候：在加载页面时，可能页面出现很多不是很重要或者不是我们所关注的，这个时候我们就可以选择不加载这些内容，以提高页面加载速度，节省资源。例如：可能页面上图片比较多，而我们又不关心图片内容。那么，在加载页面时，可以选择不加载图片，以提高页面加载速度。这里我们主要用到一个Route类拦截修改请求。2.

在日常工作和学习中，自动化测试的时候：在加载页面时，可能页面出现很多不是很重要或者不是我们所关注的，这个时候我们就可以选择不加载这些内容，以提高页面加载速度，节省资源。例如：可能页面上图片比较多，而我们又不关心图片内容。那么，在加载页面时，可以选择不加载图片，以提高页面加载速度。这里我们主要用到一个Route类拦截修改请求。2.

在我们日常工作中或者生活中，经常会遇到我们的页面内容较多，一个屏幕范围无法完整展示内容，我们就需要滚动滚动条去到我们想要的地方，如下图页面，我们虽然在豆瓣首页，但是内容并不完整，如果我们想要直接点击电影模块中的选电影按钮，是需要往下滑动的。当页面超过屏幕的高度时候，需要滚动到元素出现的位置，让元素处于可视的窗口上才能去操作元素。

有些网站为了节省流量和资源，提高加载效率，采用的是动态加载（懒加载）的，也就是当拖动页面右侧滚动条后会自动加载网页下面的内容，不拖动就不会加载的或者通过鼠标滚轮操作。

鼠标为我们使用电脑提供了很多方便，我们看到的东西就可以将鼠标移动过去进行点击就可以打开或者访问内容，当页面内容过长时，我们也可以使用鼠标滚轮来实现对整个页面内容的查看，其实playwright也有鼠标操作的方法。上一篇文章中已经讲解过鼠标的部分操作了，今天宏哥在这里将剩下的其他操作进行一个详细地介绍和讲解。

前边文章中已经讲解过鼠标的拖拽操作，今天宏哥在这里对其的其他操作进行一个详细地介绍和讲解，然后对其中的一些比较常见的、重要的操作单独拿出来进行详细的介绍和讲解。

分页测试，这种一般都是公共的方法系统中都写好了，这种一般出现是数据展示比较多的时候，会采取分页的方法，而且比较固定，一般是没有问题的，因此它非常适合自动化测试，但是如何使用playwright来进行分页自动化测试了，宏哥今天就讲解和分享一下。

在我们日常执行自动化测试工作的过程中，经常会遇到一些偶发性的bug，但是因为bug是偶发性的，我们不一定每次执行都能复现，所以我们在测试执行的时候，追踪用例执行就变得非常重要了。playwright提供了一个Playwright Trace Viewer工具来追踪测试执行，这是一个GUI工具，我们可以通过它探索记录的 Playwright 测试跟踪，可以在测试的每个操作中前后移动，并直观地查看每个操作期间发生的情况。

上一篇讲解和分享了录制自动生成脚本，索性连带录制视频也一股脑的在这里就讲解和分享了。今天我们将学习如何使用Playwright和Python来录制浏览器操作的视频，以便在需要时进行回放和分析。

各种自动化框架都会有脚本录制功能， playwright这么牛叉当然也不例外。很早之前的selenium、Jmeter工具，发展到每种浏览器都有对应的录制插件。今天我们就来看下微软自动化框架playwright是如何录制脚本的。很多小伙伴或者童鞋们会觉得奇怪，怎么现在才将录制生成脚本啊，要是早点讲解和分享，我还费什么劲，揪头发写代码啊。宏哥这里说一下：这么做的目的就是为了录制生成脚本打基础的。要不然开始直接上手就录制了，就算生成脚本你也不知道什么意思，更不用说脚本中有错误需要你调试修改脚本了。

这个系列的文章也讲解和分享了差不多三分之一吧，突然有小伙伴或者童鞋们问道playwright有没有截图的方法。答案当然是：肯定有的。宏哥回过头来看看确实这个非常基础的知识点还没有讲解和分享。那么在这个契机下就把它插队分享和讲解一下。Playwright提供了一个截屏的API：page.screenshot。使用该API，只需要指定截图的图片的保存路径及文件名即可。如果仅指定文件名，默认保存在当前目录。

这个系列的文章也讲解和分享了差不多三分之一吧，突然有小伙伴或者童鞋们问道playwright有没有截图的方法。答案当然是：肯定有的。宏哥回过头来看看确实这个非常基础的知识点还没有讲解和分享。那么在这个契机下就把它插队分享和讲解一下。Playwright提供了一个截屏的API：page.screenshot。使用该API，只需要指定截图的图片的保存路径及文件名即可。如果仅指定文件名，默认保存在当前目录。截图介绍官方API的文档地址：Screenshots | Playwright Pythonscreens

按理说，现在这种一闪而过的toast的已经相当普及或者是见怪不怪了，应该网上的大网站会用到的，偶然的在一次租房中，看到了这种场景，所以宏哥决定将其拿来主义，进行演示实践一下。

在使用appium写app自动化的时候介绍toast的相关元素的定位，在Web UI测试过程中，也经常遇到一些toast（出现之后一闪而过，不留下一点点痕迹），那么这个toast我们这边如何使用playwright进行定位测试呢？今天宏哥就分两篇介绍一下。Android中的Toast是一种简易的消息提示框。当视图显示给用户，在应用程序中显示为浮动。和Dialog不一样的是，它永远不会获得焦点，无法被点击。用户将可能是在中间键入别的东西。

这一篇宏哥主要介绍playwright如何在IE、Chrome和Firefox三个浏览器上处理不信任证书的情况，我们知道，有些网站打开是弹窗，SSL证书不可信任，但是你可以点击高级选项，继续打开不安全的链接。举例来说，想必大家都应该用过前几年的12306网站购票，点击新版购票，是不是会出现如下的界面。

这一篇宏哥主要介绍playwright如何在IE、Chrome和Firefox三个浏览器上处理不信任证书的情况，我们知道，有些网站打开是弹窗，SSL证书不可信任，但是你可以点击高级选项，继续打开不安全的链接。举例来说，想必大家都应该用过前几年的12306网站购票，点击新版购票，是不是会出现如下的界面。

在实际工作中，我们需要对处理的元素进行高亮显示，或者有时候为了看清楚操作过程和步骤我们需要跟踪鼠标点击了哪些元素需要标记出来。虽然很少遇到，但是为了以后大家可以参考或者提供一种思路，今天宏哥就在这里把这种测试场景playwright是如何处理的讲解和分享一下。

在做web自动化时，有些情况playwright的api无法完成以及无法应对，需要通过或者借助第三方手段比如js来完成实现，比如：去改变某些元素对象的属性或者进行一些特殊的操作，本文讲解playwright怎样来调用JavaScript完成特殊操作。

理想很丰满现实很骨感，在应用playwright实现web自动化时，经常会遇到处理日期控件点击问题，手工很简单，可以一个个点击日期控件选择需要的日期，但自动化执行过程中，完全复制手工这样的操作就有点难了或者是有些复杂啰嗦而且麻烦不过相对于selenium来说，playwright已经很好了。宏哥上一篇已经讲解了如何处理日历时间控件，但是有些网站不知道出于什么原因，对于第一种方法可能会遇到输入框是readonly的情况，禁止输入文本。

上一篇的日历时间控件宏哥介绍的比较传统也是很常见的。宏哥不能说它很low，但是相比较一些高端、大气、上档次的日历时间控件，结果就一目了然了：确实很low。