相关文章推荐
小百科  ›  playwright基础采用操作、断点、服务台最大化、启动本地浏览器、载入本地寄存器、滑块操作、图片验证码检索、Pyinstaller拿去 - 豆瓣
谷歌浏览器 浏览器缓存 chromium
至今单身的牛排
1 年前
首发于 PlayWright+Python自动化

playwright基础使用操作、断点、窗口最大化、启动本地浏览器、加载本地缓存、滑块操作、图片验证码识别、Pyinstaller打包

playwright断点使用

在运行selenium脚本的时候，我们通常习惯用sleep去让页面暂停 ，去定位元素，

playwright 的 page.pause() 断点功能出现，让打开可以愉快的在页面上调试了，我们甚至可以 直接使用 playwright.$(selector) 直接支持playwright选择器的方法查询。

例如：

playwright.$('#username')通过id定位

playwright.$('text=用户名')，文本模糊查询

<input class=​"required username" id=​"username" size=​"25" tabindex=​"1" type=​"text" placeholder=​"用户名" accesskey=​"n" autocomplete=​"off" name=​"username" value>​ 

page.pause() # 断点
运行后会弹出 playwright inspector 工具
使用 pick locator点击后，在页面上点击获取定位元素

窗口最大化设置

playwright 默认启动的浏览器窗口大小是1280x720， 我们可以通过设置no_viewport参数来禁用
固定的窗口大小 ，no_viewport 禁用窗口大小

第一种

设置args参数--start-maximized 并且设置no_viewport=True 

from time import sleep
from playwright.sync_api import sync_playwright
with sync_playwright() as driver:
    browser=driver.chromium.launch(headless=False,args=['--start-maximized'])
    context=browser.new_context(no_viewport=True)
    page=context.new_page()
 解释：在 Playwright 中，browser 对象代表整个浏览器，而context 对象代表一个浏览器上下文。通常情况下，每个浏览器只有一个默认上下文，但是可以通过 browser.new_context() 方法创建多个上下文，每个上下文之间相互隔离，拥有自己的 cookies、缓存和身份验证信息等。
在你提供的代码中，通过 browser.new_context(no_viewport=True) 方法创建了一个没有视口的浏览器上下文，即不会显示实际的浏览器窗口，适合一些不需要展示的自动化场景。

第二种，通过viewport={'width': 1920, 'height': 1080}指定窗口大小 

from time import sleep
from playwright.sync_api import sync_playwright
with sync_playwright() as driver:
    browser=driver.chromium.launch(headless=False)
    context=browser.new_context(viewport={'width': 1920, 'height': 1080})
    page=context.new_page()

启动本地浏览器和edge浏览器

使用 playwright install 命令默认会安装chromium,firefox 和 webkit 三个浏览器。 可以通过 playwright -h 命令查看目前支持的浏览器
playwright install --help


从命令行帮助信息中可以看到支持的浏览器有:chromium, chrome, chrome-beta, msedge,
msedge-beta, msedge-dev, firefox, webkit

本地安装上面的浏览器，安装过就不会安装。 

 playwright install chrome
 playwright install msedge
安装完如下图显示版本，桌面查看。

可以先关闭正在运行的chrome 浏览器，使用以下命令安装到最新版 

 playwright install --force chrome

channel 指定打开浏览器

Google Chrome 和 Microsoft Edge浏览器都是用的 chromium 内核，所以只需加一
个channel="chrome" 即可打开本地谷歌浏览器

加载本地缓存访问


设置 USER_DIR_PATH ，获取方式在浏览器里面输入 

  chrome://version
from playwright.sync_api import sync_playwright
import getpass
USER_DIR_PATH = f"/Users/{getpass.getuser()}/Library/Application Support/Google/Chrome/Default"
print(USER_DIR_PATH)
with sync_playwright() as driver:
    browser=driver.chromium.launch_persistent_context(
# 指定本机用户缓存地址
    user_data_dir=USER_DIR_PATH，
# 设置 GUI 模式        
    headless=False
# 接收下载事件
    ,accept_downloads=True
    page=browser.new_page()
    page.goto('https://zhuanlan.zhihu.com/p/628604629/edit')
    page.pause()

操作已打开的浏览器，绕过验证码登录

1首先配置chrome的环境变量。

2， 参数理解

• --remote-debugging-port是指定运行端口，只要没被占用就行
• --user-data-dir指定运行浏览器的运行数据，新建一个干净目录，不影响系统原来的 数据
• --incognito隐私模式打开
• -–start-maximized:窗口最大化

• --new-window:直接打开网址

wind，找到图标右击，找到快捷方式复制地址，在环境变量path里面配置。

打开cmd输入命令启动chrome浏览器 

chrome.exe --remote-debugging-port=1234 --user-data-dir="D:\playwright_chrome"

mac 电脑直接配置 export PATH="/Applications/Google\ Chrome.app/Contents/MacOS ":$PAT

终端输入 

 Google\ Chrome --remote-debugging-port=1234 --user-data-dir=/Users/smzdm/Desktop/chromeData

然后使用 playwright 接管页面
当页面打开后，可以使用connect_over_cdp()方法接管前面已经打开的浏览器，获取到context 上下文，通过上下文再获取到page对象 

 from playwright.sync_api import sync_playwright
with sync_playwright() as diver:
    browser=diver.chromium.connect_over_cdp('http://localhost:1234')
    page=browser.contexts[0].pages[0]
 print(page.url)
 print(page.title())
    page.get_by_text('全部需求').click()


操作滑块

操作滑块，需用到mouse 方法
• mouse.move()起点或终点坐标位置
• mouse.down()按住鼠标
• mouse.up()释放鼠标

前端滑块脚本 

<!DOCTYPE html>
  <meta charset="UTF-8">
  <title>滑动解锁</title>
  <style>
    .slider {
      position: relative;
      width: 300px;
      height: 50px;
      background-color: #f0f0f0;
      border-radius: 25px;
      margin: 50px auto;
    .slider-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 25px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    .slider-knob {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
      background-color: #fff;
      border-radius: 50%;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      cursor: pointer;
  </style>
</head>
  <div class="slider">
    <div class="slider-bg"></div>
    <div class="slider-knob"></div>
  <script>
    var slider = document.querySelector('.slider');
    var knob = document.querySelector('.slider-knob');
    var bg = document.querySelector('.slider-bg');
    var distance = bg.offsetWidth - knob.offsetWidth;
    var isDragging = false;
    var startX = 0;
    knob.addEventListener('mousedown', function(e) {
      isDragging = true;
      startX = e.clientX;
    document.addEventListener('mousemove', function(e) {
      if (isDragging) {
        var offsetX = e.clientX - startX;
        var x = Math.min(Math.max(0, offsetX), distance);
        knob.style.left = x + 'px';
    document.addEventListener('mouseup', function(e) {
      if (isDragging) {
        var offsetX = e.clientX - startX;
        var x = Math.min(Math.max(0, offsetX), distance);
        if (x === distance) {
          alert('验证通过');
        } else {
          knob.style.left = 0;
        isDragging = false;
  </script>
</body>
</html>

编写滑动脚本 

from playwright.sync_api import sync_playwright
with sync_playwright() as dirver:
    browser=dirver.chromium.launch(headless=False)
    page=browser.new_page()
    page.goto('file:///Users/smzdm/automate/Play_wright/learn/case.html')
    slider = page.locator('.slider-knob').bounding_box()
    page.mouse.move(x=slider['x']+slider['width']/2,y=slider['y']+slider['height']/2)
    page.mouse.down()
    page.mouse.move(x=slider['x']+slider['width']/2+250,y=slider['y']+slider['height']/2)
    page.mouse.up()
    page.pause()
bounding_box  获取元素的x ,y坐标， 250移动的多少px

图片验证码识别

首先安装第三方识别验证码库，使用pip安装 ddddocr 库： 

pip install ddddocr

调试验证是否可以识别验证码测试代码 

import ddddocr
ocr=ddddocr.DdddOcr(show_ad=False) 
with open("img.png",'rb') as f:
    img_bytes=f.read() 
    yzm=ocr.classification(img_bytes)
    print(yzm)
1，创建一个DdddOcr对象：
2，打开一个图片文件这个语句将打开一个名为img.png的图片文件，并将其读取为二进制数据
3，使用DdddOcr对象的classification方法进行OCR识别：

playwright自动化脚本编写 

import ddddocr
ocr=ddddocr.DdddOcr(show_ad=False)
# with open("img.png",'rb') as f:
#     img_bytes=f.read()
#     yzm=ocr.classification(img_bytes)
#     print(yzm)
from  playwright.sync_api import sync_playwright
with sync_playwright() as driver:
    brower=driver.chromium.launch(headless=False)
    page=brower.new_page()
    page.goto('https://www.zhidemai.com/contact/#media')
    img_bytes=page.locator('canvas#code').screenshot()#变量储存二进制数据
    yzm = ocr.classification(img_bytes)直接识别
    print(yzm)
    page.locator('//div[@class="wrap"]/div[@class="media"][2]//input[@placeholder="请输入验证码"]').fill(yzm)
    page.pause()

Pyinstaller 打包生成独立可执行文件

安装Pyinstaller 

     pip3 install pyinstaller


playwright 与 Pyinstaller 结合使用来创建独立的可执行文件

playwright.dev/docs/int playwright官网

将浏览器与可执行文件捆绑在一起

设置参数 PLAYWRIGHT_BROWSERS_PATH 默认设置为 0，意思是安装到site-packages下的 ， playwright目录 当然你也可以设置成其他位置，比如你指定安装到你代码的跟目录，得使用路径的绝对路径 

window电脑设置
 set PLAYWRIGHT_BROWSERS_PATH=0
 
推荐文章
Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
小百科 - 百科知识指南