初见PlayWright

PlayWright特色

• 跨浏览器：PlayWright支持所有现代的浏览器渲染引擎，包括Chromium、WebKit、Firefox，这意味着它可以驱动像Chrome、Edge、Firefox、Safari等主流浏览器
• 跨平台：基于浏览器的特性，可以在Windows、Linux和Mac上，以headless或者headed模式运行，并且支持在安卓或者安卓模拟器上原生Google Chrome和Mobile Safari，乃至云端的同类浏览器渲染引擎
• 跨语言：PlayWright API支持Python、JavaScript、TypeScript、Java、.NET
• 自动等待：PlayWright在执行动作之前等待元素可操作。它还具有一组丰富的内省事件。两者的结合消除了人为超时的需要——这是不稳定测试的主要原因
• 断言：PlayWright断言是专门为动态网络创建的。检查会自动重试，直到满足必要的条件
• 追踪：配置测试重试策略，通过截图、视频、日志等轻松捕获执行过程
• 进程外测试：浏览器在不同进程中运行属于不同来源的 Web 内容。Playwright 与现代浏览器架构保持一致，并在进程外运行测试。这使得 Playwright 摆脱了典型的进程内测试运行器的限制
• ALL in One：执行测试可跨越多个Tabs、多个Origins和多个User的场景。为不同的用户创建具有不同上下文的场景，并在对应的服务器上运行，这一切均可在一次测试内完成
• 可信事件：悬停元素，与动态控件交互，产生可信事件。Playwright使用与真实用户无差别的真实浏览器输入
• 测试frames、穿透 Shadow DOM：PlayWright选择器可以穿透Shadow DOM 并允许无缝地进入frames内
• 浏览器上下文：Playwright 为每个测试创建一个浏览器上下文，它相当于一个全新的浏览器配置文，无需付出过多的代价即可实现完全的测试隔离，创建一个新的浏览器上下文只需要几毫秒
• 权限共享：保存上下文的身份验证状态并在所有测试中重用它。这绕过了每个测试中的重复登录操作，但提供了独立测试的完全隔离
• 代码生成器：通过记录您的操作来生成测试，同时可以将它们保存为任何支持的语言
• Playwright Inspector：强大的页面元素探测器，它可以非常便利的探测页面元素、生成元素选择器、逐步的执行测试、查看点击选项、查看执行日志等
• TraceViewer：Playwright捕获所有信息以用来检查失败的测试执行，包括测试执行截屏、实时 DOM 快照、动作资源管理器、测试源等等

PlayWright Python开发环境

安装Pytest插件：

Playwright建议使用官方的Playwright Pytest插件来编写测试，它已经提供了上下文隔离，以及对各种浏览器的支持，同时提供了同步执行和异步执行的支持，当然也可以编写自己的基础框架或者工具类来自定义执行测试

pip install pytest-playwright

C:\Users\Administrator>pip install pytest_playwright
Collecting pytest_playwright
  Downloading pytest_playwright-0.3.3-py3-none-any.whl (10 kB)
Requirement already satisfied: playwright>=1.18 in c:\python310\lib\site-packages (from pytest_playwright) (1.33.0)
Requirement already satisfied: pytest<8.0.0,>=6.2.4 in c:\python310\lib\site-packages (from pytest_playwright) (7.3.1)
Requirement already satisfied: pytest-base-url<3.0.0,>=1.0.0 in c:\python310\lib\site-packages (from pytest_playwright) (2.0.0)
Requirement already satisfied: python-slugify<9.0.0,>=6.0.0 in c:\python310\lib\site-packages (from pytest_playwright) (8.0.1)
Requirement already satisfied: greenlet==2.0.1 in c:\python310\lib\site-packages (from playwright>=1.18->pytest_playwright) (2.0.1)
Requirement already satisfied: pyee==9.0.4 in c:\python310\lib\site-packages (from playwright>=1.18->pytest_playwright) (9.0.4)
Requirement already satisfied: typing-extensions in c:\python310\lib\site-packages (from pyee==9.0.4->playwright>=1.18->pytest_playwright) (4.5.0)
Requirement already satisfied: iniconfig in c:\python310\lib\site-packages (from pytest<8.0.0,>=6.2.4->pytest_playwright) (2.0.0)
Requirement already satisfied: packaging in c:\python310\lib\site-packages (from pytest<8.0.0,>=6.2.4->pytest_playwright) (23.1)
Requirement already satisfied: pluggy<2.0,>=0.12 in c:\python310\lib\site-packages (from pytest<8.0.0,>=6.2.4->pytest_playwright) (1.0.0)
Requirement already satisfied: exceptiongroup>=1.0.0rc8 in c:\python310\lib\site-packages (from pytest<8.0.0,>=6.2.4->pytest_playwright) (1.1.1)
Requirement already satisfied: tomli>=1.0.0 in c:\python310\lib\site-packages (from pytest<8.0.0,>=6.2.4->pytest_playwright) (2.0.1)
Requirement already satisfied: colorama in c:\python310\lib\site-packages (from pytest<8.0.0,>=6.2.4->pytest_playwright) (0.4.6)
Requirement already satisfied: requests>=2.9 in c:\python310\lib\site-packages (from pytest-base-url<3.0.0,>=1.0.0->pytest_playwright) (2.30.0)
Requirement already satisfied: text-unidecode>=1.3 in c:\python310\lib\site-packages (from python-slugify<9.0.0,>=6.0.0->pytest_playwright) (1.3)
Requirement already satisfied: charset-normalizer<4,>=2 in c:\python310\lib\site-packages (from requests>=2.9->pytest-base-url<3.0.0,>=1.0.0->pytest_playwright) (3.1.0)
Requirement already satisfied: idna<4,>=2.5 in c:\python310\lib\site-packages (from requests>=2.9->pytest-base-url<3.0.0,>=1.0.0->pytest_playwright) (3.4)
Requirement already satisfied: urllib3<3,>=1.21.1 in c:\python310\lib\site-packages (from requests>=2.9->pytest-base-url<3.0.0,>=1.0.0->pytest_playwright) (2.0.2)
Requirement already satisfied: certifi>=2017.4.17 in c:\python310\lib\site-packages (from requests>=2.9->pytest-base-url<3.0.0,>=1.0.0->pytest_playwright) (2023.5.7)
Installing collected packages: pytest_playwright
Successfully installed pytest_playwright-0.3.3

安装浏览器：

playwirght install

开发环境验证：

创建一个py文件，按照Pytest的命名规则即可，例如 test_my_application.py ，然后将如下代码写入文件并保存

import re
from playwright.sync_api import Page, expect


def test_homepage_has_Playwright_in_title_and_get_started_link_linking_to_the_intro_page(page: Page):
    page.goto("https://playwright.dev/")

    # Expect a title "to contain" a substring.
    expect(page).to_have_title(re.compile("Playwright"))

    # create a locator
    get_started = page.get_by_role("link", name="Get started")

    # Expect an attribute "to be strictly equal" to the value.
    expect(get_started).to_have_attribute("href", "/docs/intro")

    # Click the get started link.
    get_started.click()

    # Expects the URL to contain intro.
    expect(page).to_have_url(re.compile(".*intro"))
    

默认情况下，测试会在chromium上执行，但这个可以通过配置CLI进行修改，并且默认情况下测试执行是在headless模式下，意味着不会启动浏览器的UI，测试执行的过程和结果会直接在命令行终端显示
在该文件的相同的路径下，直接运行命令 pytest 即可执行

PlayWright Java开发环境

JDK安装与环境变量配置

官方地址为：jdk-11.0.6，找到WIndows系统上所需的安装文件 jdk-11.0.6_windows-x64_bin.exe , 按照引导下载即可，现如今比较麻烦的是Oracle强制登陆，因此可能还需要注册个账号，只是稍微麻烦了点

Step1 启动JDK安装程序

以JDK11为例，双击 jdk-11.0.6_windows-x64_bin.exe ,启动JDK安装程序，第一个界面如下所示，直接点击 下一步

Step2 选择安装路径及组件

此处默认为最佳，继续 下一步

Step3 执行安装过程

安装程序会自行完成复制、提取、注册、安装等过程，直到如图所示界面出现即安装完成，点击关闭

Step4 配置环境变量

路线 I：打开控制面板==》系统==》高级系统设置 》环境变量》系统变量
路线 II：在我的电脑上点击鼠标右键，在弹出的菜单中点击属性，殊途同归

系统变量:中添加配置项 JAVA_HOME ,其中变量值是安装JDK的路径，如果是默认安装的则跟下图一样

系统变量:中添加配置项 CLASSPATH ,如图所示，变量值为 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar，请尽量复制黏贴
注意 . 代表的是当前路径，这决定于Java执行的时候去那个路径找class文件，如若原理不清，就直接复制黏贴即可

系统变量:中找到 Path ,为该项添加变量值 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 注意分号，多个变量之间用 ; 号隔开，否则不但无法生效还会影响其他配置

Step5 环境校验

命令行输入 java -version,输出如下内容则表示正确

C:\Users\davieyang>java -version
java version "11.0.6" 2020-01-14 LTS
Java(TM) SE Runtime Environment 18.9 (build 11.0.6+8-LTS)
Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.6+8-LTS, mixed mode)

命令行输入javac,输出如下内容则表示正确

C:\Users\davieyang>javac
用法: javac <options> <source files>
其中, 可能的选项包括:
  @<filename>                  从文件读取选项和文件名
  -Akey[=value]                传递给注释处理程序的选项
  --add-modules <模块>(,<模块>)*
        除了初始模块之外要解析的根模块; 如果 <module>
                为 ALL-MODULE-PATH, 则为模块路径中的所有模块。
  --boot-class-path <path>, -bootclasspath <path>
        覆盖引导类文件的位置
  --class-path <path>, -classpath <path>, -cp <path>
        指定查找用户类文件和注释处理程序的位置
  -d <directory>               指定放置生成的类文件的位置
  -deprecation                 输出使用已过时的 API 的源位置
  --enable-preview             启用预览语言功能。要与 -source 或 --release 一起使用。
  -encoding <encoding>         指定源文件使用的字符编码
  -endorseddirs <dirs>         覆盖签名的标准路径的位置
  -extdirs <dirs>              覆盖所安装扩展的位置
  -g                           生成所有调试信息
  -g:{lines,vars,source}       只生成某些调试信息
  -g:none                      不生成任何调试信息
  -h <directory>               指定放置生成的本机标头文件的位置
  --help, -help, -?            输出此帮助消息
  --help-extra, -X             输出额外选项的帮助
  -implicit:{none,class}       指定是否为隐式引用文件生成类文件
  -J<flag>                     直接将 <标记> 传递给运行时系统
  --limit-modules <模块>(,<模块>)*
        限制可观察模块的领域
  --module <module-name>, -m <module-name>
        只编译指定的模块, 请检查时间戳
  --module-path <path>, -p <path>
        指定查找应用程序模块的位置
  --module-source-path <module-source-path>
        指定查找多个模块的输入源文件的位置
  --module-version <版本>        指定正在编译的模块版本
  -nowarn                      不生成任何警告
  -parameters                  生成元数据以用于方法参数的反射
  -proc:{none,only}            控制是否执行注释处理和/或编译。
  -processor <class1>[,<class2>,<class3>...]
        要运行的注释处理程序的名称; 绕过默认的搜索进程
  --processor-module-path <path>
        指定查找注释处理程序的模块路径
  --processor-path <path>, -processorpath <path>
        指定查找注释处理程序的位置
  -profile <profile>           请确保使用的 API 在指定的配置文件中可用
  --release <release>          针对特定 VM 版本进行编译。支持的目标: 6, 7, 8, 9, 10, 11
  -s <directory>               指定放置生成的源文件的位置
  -source <release>            提供与指定发行版的源兼容性
  --source-path <path>, -sourcepath <path>
        指定查找输入源文件的位置
  --system <jdk>|none          覆盖系统模块位置
  -target <release>            生成特定 VM 版本的类文件
  --upgrade-module-path <path>
        覆盖可升级模块位置
  -verbose                     输出有关编译器正在执行的操作的消息
  --version, -version          版本信息
  -Werror                      出现警告时终止编译

Java集成开发环境配置

1、安装JDK11，JDK的配置属于最最基本的要求，应该烂熟于心
2、启动IDEA，然后点击【Create New Project】

3、选择项目类型以及项目SDK，如图所示，然后点击Next

4、嘛都不选，继续Next

5、给项目命名以及选择源码放在哪个路径下，然后Finish即可

6、src是我们写代码的地方

7、在src上点击右键，New—>Package

8、package建好后，在package上点击右键，New—Java Class

9、下拉列表中输入新建的java文件的名称，然后下拉列表中还是选择Class

10、文件建好后，写入一些可执行的源码

11、实际上到这里集成开发环境是无法执行的但是在命令行直接用命令是可以执行的，集成开发环境需要进一步配置，找到Run这个选项

12、点击该选项或者直接使用快捷键Alt+Shift+F10，会弹出配置选项，开发环境需要我们指定主类，如果不指定它找不到，在弹出窗口中点击【Edit Configurations】

13、在配置窗口点击左上角的加号，新建一个Run/Debug 的配置

14、默认情况下，主类选项是空的，需要我们手动指定

15、点击后边的3个点，选择我们刚才写的源码文件

16、类的全名【package.class】就出来了

17、点击窗口右下角的APPLY，然后点击Run即可

Maven开发环境

Maven的实际作用

-Maven是一个项目管理工具，它包含 了一个项目对象模型 (Project Object Model)，一组标准集合，一个项目生命周期(Project Lifecycle)，一个依赖管理系统(Dependency Management System)，和用来运行定义在生命周期阶段(phase)中插件(plugin)目标(goal)的逻辑。当你使用Maven的时候，你用一个明确定 义的项目对象模型来描述你的项目，然后Maven可以应用横切的逻辑，这些逻辑来自一组共享的（或者自定义的）插件

• 项目非常大时，可借助Maven将一个项目拆分成多个工程，最好是一个模块对应一个工程，利于分工协作。而且模块之间还是可以发送消息的
• 借助Maven，可将jar包仅仅保存在“仓库”中，有需要该文件时，就引用该文件接口，不需要复制文件过来占用空间
• 借助Maven可以以规范的方式下载jar包，因为所有的知名框架或第三方工具的jar包已经按照统一的规范存放到了Maven的中央仓库中
• Maven会自动将你要加入到项目中的jar包导入，不仅导入，而且还会将该jar包所依赖的jar包都自动导入进来。

下载与配置

官方下载地址为Maven

下载后解压，然后配置MVN系统环境变量环境变量，如下图所示

变量名可用M2_HOME或者MAVEN_HOME，变量值就是安装目录，如果JDK配的很遛，这个同理

PATH：%M2_HOME%\bin;

检查Maven环境

配置仓库

配置本地仓库

配置MVN本地仓库物理地址，也就是maven会从中央仓库下载需要的jar包到本地，根据自己的安装，找到如下路径

再此路径下打开setting.xml，配置项如下，注意XML节点，配置成自己合适存放所下载jar包的路径即可

配置中心仓库

配置MVN中央仓库：将如下配置内容添加到镜像配置中

  <mirror>  
      <id>alimavenid>  
      <mirrorOf>centralmirrorOf>
      <name>aliyun mavenname>  
      <url>http://maven.aliyun.com/nexus/content/groups/public/url>  
  mirror>

此处单配置了一个镜像地址，是阿里云的地址，官方地址下载太慢可以通过这个位置的配置代替

生成.m2地址

将该文件复制如下路径下，如果没有.m2路径，启动命令行执行命令mvn help:system来生成，然后将原来的配置文件复制到生成的.m2路径下，集成开发工具，如IDEA等会自动读取.m2路径下的配置

配置IDEA

IDEA官方下载地址：https://www.jetbrains.com/idea/download/，默认安装即可,打开IDEA，新建一个maven项目，检查Maven的配置如图所示，箭头所指两个配置已经更新到了前边步骤中的位置

IDEA会在右下角（注意右下角）提示你是否需要自动安装pom配置的jar包,一旦出现，就要enable它
配置pom
找到pom.xml文件，打开它，配置项目所需的依赖包，如下图配置

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0modelVersion>

  <groupId>org.examplegroupId>
  <artifactId>examplesartifactId>
  <version>0.1-SNAPSHOTversion>
  <name>Playwright Client Examplesname>
  <properties>
    <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
  properties>
  <dependencies>
    <dependency>
      <groupId>com.microsoft.playwrightgroupId>
      <artifactId>playwrightartifactId>
      <version>1.34.0version>
    dependency>
  dependencies>
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.pluginsgroupId>
        <artifactId>maven-compiler-pluginartifactId>
        <version>3.10.1version>
        
        <configuration>
          <source>1.8source>
          <target>1.8target>
        configuration>
      plugin>
    plugins>
  build>
project>

到此Java环境完成Pom中配置的依赖可以在MVN的中央库http://mvnrepository.com/， 检索到你想要的包，配置进去即可

Maven常用命令

基本的常用命令如下：

mvn archetype：create 创建Maven项目
mvn compile 编译源代码
mvn deploy 发布项目
mvn test-compile 编译测试源代码
mvn test 运行应用程序中的单元测试
mvn site 生成项目相关信息的网站
mvn clean 清除项目目录中的生成结果
mvn package 根据项目生成的jar
mvn install 在本地Repository中安装jar
mvn eclipse:eclipse 生成eclipse项目文件
mvnjetty:run 启动jetty服务
mvntomcat:run 启动tomcat服务
mvn clean package -Dmaven.test.skip=true:清除以前的包后重新打包，跳过测试类

配置Java的开发环境，首先要对使用Maven构建Java环境比较熟悉，Playwright的Java开发环境只是在Maven构建的Java环境中配置Pom的时候，将其添加到依赖中，配置好Java开发环境后，在项目中新建个java文件，写入如下代码

package org.example;

import com.microsoft.playwright.*;

public class App {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            Browser browser = playwright.chromium().launch();
            Page page = browser.newPage();
            page.navigate("http://playwright.dev");
            System.out.println(page.title());
        }
    }
}

执行即可