1.你可能不知道的源码ChromeDevtools实用功能
2.在某些版本手机中通过UIAutomatorViewer工具无法获取手机屏幕元素的信息？
3.已解决Mac电脑使用pyautogui截图screenshot报错
4.「自动化测试」新一代Web前端自动化测试框架——playwright快速上手！

你可能不知道的源码ChromeDevtools实用功能

       今天来分享ChromeDevTools的个实用调试功能！

1.保留日志

       当我们刷新完页面之后，源码通常控制台的源码Console面板就会被清空。如果想保留控制台的源码日志，就可以在设置中勾选Preservelog选项以保留控制台中的源码利用源码搭建小程序日志。

2.代码覆盖率

       我们可以打开设置，源码在Experiments中勾选Recordcoveragewhileperformancetracing选项。源码

       在面板下方的源码Coverage面板中点击红色按钮以记录页面的代码覆盖率：

       代码覆盖率使用动态分析法来收集代码运行时的覆盖率，让开发者知道有代码在页面上真正的源码使用。动态分析是源码指在应用运行状态下收集代码执行数据的过程，换句话说，源码覆盖率数据就是源码在代码执行过程中通过标记收集到的。

3.显示重绘

       在浏览器的源码开发者工具中可以通过开启显示重绘选项以查看页面在执行操作时哪些元素会发生重绘。

       在控制台右上角三个点中的源码Moretools选项中开启Rendering选项卡：

       在Rendering（渲染）选项卡中开启Paintflashing：

       当刷新页面时，显示绿色的dnf易语言源码模板区域就是重新绘制区域。

4.检查动画

       Chrome的开发者工具不仅可以调试样式，还可以调试动画，可以在控制台右上角三个点中的Moretools选项中开启Animations选项卡：

       当页面的动画执行时，就会在时间轨道上查看所有的动画，点击其中一个动画可以懂得执行过程以及时间轴：

       我们可以在时间轴上定位到任一时刻的动画帧，也可以拖动左右两端的圆点来修改动画的延迟和周期，修改之后可以在属性面板看到对应的CSS样式。

5.截图

       Chrome浏览器内置了截图功能，可以在浏览器开发者工具中使用Ctrl+Shift+P（Windows）或者Command+Shift+P（Mac）快捷键打开搜索来查找screenshot：

       这里有四个选项：

       第一个：截取自选区域；

       第二个：截取整个网页；

       第三个：截取当前节点；

       第四个：截取当前屏幕。

       截图完成后自动下载到下载目录，打开浏览器的下载框或本机的下载目录即可看到。

6.LocalOverrides

       我们可以使用本地资源覆盖网页所使用的资源，比如可以使用本地CSS文件覆盖网页的css文件，修改样式。将本地的通风解算算法源码文件夹映射到网络，在Chrome开发者功能里面对CSS样式的修改都会直接改动本地文件，页面重新加载，使用的资源也是本地资源，达到持久化的效果。

       详见：/post/

8.事件监听器的断点

       有时应用会在用户发生交互时出现问题，这时我们就可以添加事件监听器添加断点来捕获这些事件以检查交互时的问题。可以在Source面板右侧的EventListenerBreakpoints中勾选相应的事件：

9.DOM操作的断点

       当页面的内容发生变化时，如果想要知道是哪些脚本影响了它，就可以给DOM设置断点。我们可以右键点击需要设置断点的DOM元素，在弹出的菜单中点击Breakon以选择合适的断点。

       可以看到，Breakon中有三个选项：

       SubtreeModifications：子节点（内容、属性）修改通知，常用在子节点内容发生变化后，cocos数据库源码来定位源码；

       AttributesModifications：当前节点的属性修改通知，常用在节点的className等属性被修改后，来定位源码了；

       NodeRemoval：当前节点移动时通知，常用在节点被移除时，定位源码。

.异步请求的断点

       XHRbreakpoints可以用于异步请求的断点，点击加号即可添加断点规则，输入请求的URL地址（片段），会在请求地址包含对应字符串的异步请求发出的位置自动停止：

原文：/post/

在某些版本手机中通过UIAutomatorViewer工具无法获取手机屏幕元素的信息？

       如果你的工具只能获取到桌面，而进入任何一个APP界面，都无法获取到界面信息时，原因可能是sdk API版本过低，被听其他的瞎说什么手机没root，或者本身不支持之类，都是h5 vr 源码瞎扯。正确的解决方法是：

       1.通过Android Studio或者IDEA下载更高级的API版本，我是把最新的,都下了，这和手机本身是不是android最新版本没关系。

       2.升级后你可能会遇到一个adb连接不上手机的问题，这个请参考：

已解决Mac电脑使用pyautogui截图screenshot报错

       当您在Mac电脑上使用pyautogui进行截图时，遇到了TypeError: '<' not supported between instances of 'str' and 'int'的错误提示。这一错误意在提示您在代码中进行字符串与整数间的比较操作，而这是不被支持的。

       深入分析源代码，您发现是pyautogui库中Mac截图函数存在bug，具体为判断语句if tuple(PIL__version__) < (6, 2, 1)引发此问题。针对此bug，有两个解决方案可供选择。

       一种是被动等待策略：即等待pyautogui库的开发者修复bug。然而，这种方法较为被动，且无法保证具体修复时间，因此不推荐使用。

       另一种是主动型解决方案：自行修改源代码以解决问题。根据错误提示中蓝色文字提供的源码路径，找到相应文件并进行修改。您需要将

       修改后，记得保存修改后的文件，并重新运行项目。此时，您需要为pycharm开启屏幕录制权限：在系统设置中选择隐私与安全性，然后在屏幕录制设置中打开开关。对于使用pycharm进行屏幕录制或截图任务的场景，请确保关闭并重新启动pycharm。重新运行项目后，您将发现截图功能已恢复正常并成功保存。

       为确保截图功能正常运行，请在项目根目录下预先建立img/screenshot目录。此目录用于存放由代码生成的截图文件。

「自动化测试」新一代Web前端自动化测试框架——playwright快速上手！

       playwright上手内网如何安装项目依赖

       注意：想运行playwright需要下载相关浏览器的二进制文件

       由于默认情况下，Playwright会从MicrosoftCDN下载浏览器二进制文件。

       公司内网会阻止对公共资源的直接访问，所以不能直接通过内网进行下载。

       解决办法：

       在外网，创建一个文件夹随后在该目录下呼出命令行并输入npmi-D@playwright/test

       页面目录发生变化，并且命令行出现addedpackagesins代表下载完成

       随后命令行输入npxplaywrightinstall开始安装浏览器二进制依赖

       待下载完成后进入到对应的目录，示例为：C:\Users\winches\AppData\Local\ms-playwright

       将如图所示4个文件选中复制

       将选中的4个文件粘贴到内网中的ms-playwright文件下

playwright快速上手Playwright介绍

       Playwright是一个测试和自动化框架，可以实现网络浏览器的自动化交互。简而言之，您可以编写打开浏览器的代码，用代码实现使用所有网络浏览器的功能。自动化脚本可以实现导航到URL、输入文本、单击按钮和提取文本等功能。Playwright最令人惊喜的功能是它可以同时处理多个页面且不用等待，也不会被封锁。

       Playwright支持大多数浏览器，例如GoogleChrome、Firefox、使用Chromium内核的MicrosoftEdge和使用WebKit内核的Safari。跨浏览器的网络自动化是Playwright的强项，可以为所有浏览器有效地执行相同的代码。此外，Playwright支持各种编程语言，例如Node.js、Python、Java和.NET。您可以编写代码用于打开网站并使用这些语言中的任何一种与之交互。

使用Node.js创建playwright项目

       Playwright有自己的testrunner用于端对端测试，我们称之为PlaywrightTest.

       初始化项目并安装playwright/test库，只需要两个简单的命令既可以完成

npm?init?-ynpm?i?-D?@playwright/test

       创建一个简单的脚本test-1.spec.ts

const?{ ?test,?expect?}?=?require('@playwright/test');//?测试用例test('basic?test',?async?({ ?page?})?=>?{ ?//?打开一个页面并跳转到?搜索，用chromium驱动，将结果保存为test1.spec.ts的ts文件。

npm?playwright?test6

       命令行输入后会自动打开浏览器，然后可以看见在浏览器上的一举一动都会被自动翻译成代码，如下所示。

通过vscodePlaywrightTestforVScode插件生成代码

       通过在浏览器中执行测试操作来记录新的测试。

保留已验证状态

       执行codegen并指定--save-storage参数来保存cookies和localStorage。这对于单独记录身份验证步骤并在以后负复用它非常有用。

npm?playwright?test7

       使用--load-storage参数来加载先前的存储。通过这种方式，所有的cookies和localStorage将被恢复，使大多数web应用程序进入认证状态。

npm?playwright?test8具有自定义设置的Codegen

       如果你想在一些非标准的设置中使用codegen(例如,使用browserContext.route(url,handler)),可以调用page.pause()，它将打开一个带有代码生成控件的单独窗口。

npm?playwright?test9检查选择器（selectors）

       在open或codegen期间，您可以在任何浏览器的developertools控制台中使用以下API。

playwright.$(selector)

       查询Playwright选择器，使用实际的Playwright