playwright基础教程

- 日理万妓 2023-09-27 21:13 16阅读 0赞

## playwright ##

## 介绍 ##

Playwright是一个由Microsoft开发的自动化测试工具，可以用来测试Web应用程序。它支持多种编程语言和多个浏览器，包括Chrome，Firefox和WebKit。它通过提供一组API，使得开发人员可以在浏览器中模拟用户行为，例如单击，输入文本和导航到不同的页面，同时还能捕捉截图和视频。

Playwright的主要特点包括：

1.  跨浏览器支持：Playwright支持多个浏览器，包括Chrome，Firefox和WebKit。这意味着开发人员可以在不同的浏览器中执行自动化测试，而无需更改测试代码。
2.  多语言支持：Playwright支持多种编程语言，包括JavaScript，TypeScript，Python和Java。这使得开发人员可以使用他们喜欢的语言来编写自动化测试。
3.  内置的等待机制：Playwright有一个内置的等待机制，它可以自动等待页面加载，网络请求和元素可见性。这使得开发人员可以编写更稳定的测试，而无需手动添加等待时间。
4.  截图和视频记录：Playwright可以捕捉屏幕截图和视频记录。这对于调试测试失败的情况非常有用，可以帮助开发人员更快地发现问题。
5.  执行速度快：Playwright是建立在Chrome DevTools协议之上的，它可以利用Chrome DevTools协议的功能，

Playwright可以用于各种浏览器自动化场景，包括测试、爬虫、数据挖掘和自动化任务。它提供了对浏览器的完全控制，包括浏览器的页面和网络层面，允许开发人员更加精细地控制和模拟用户操作和交互。在测试领域，Playwright的特点是快速、可靠和可扩展，支持多浏览器执行和并行执行，可以大大提高测试效率。

除了基本的浏览器操作，Playwright还提供了一些高阶用法，包括：

1.  视频录制：可以录制浏览器的屏幕操作，以视频的形式保存。
2.  时间线跟踪：可以记录浏览器的每个网络请求和DOM事件，并以时间线的形式展示。
3.  全局并行执行：可以同时执行多个浏览器实例，加快测试执行速度。
4.  自定义浏览器实例：可以定制化浏览器实例的启动配置，以满足测试需求。

## 基础用法 ##

### 在输入框中输入文本 ###

可以使用`fill()`方法在输入框中输入文本。例如：

await page.fill('input[name="username"]', 'testuser')

此代码会在名为“username”的输入框中输入“testuser”文本。

### 点击页面元素 ###

可以使用`click()`方法单击页面上的元素。例如：

await page.click('button[id="submit"]')

此代码将单击页面上ID为“submit”的按钮。

### 选择下拉列表中的选项 ###

可以使用`selectOption()`方法从下拉列表中选择选项。例如：

await page.selectOption('select[name="country"]', 'USA')

此代码将从名称为“country”的下拉列表中选择“USA”选项。

### 模拟键盘输入 ###

可以使用`keyboard`对象模拟键盘输入。例如：

await page.keyboard.type('hello')

此代码将在当前焦点元素中输入“hello”文本。

### 模拟鼠标操作 ###

可以使用`mouse`对象模拟鼠标操作。例如：

await page.mouse.click(100, 100)

此代码将在屏幕上x坐标为100，y坐标为100的位置单击鼠标。

### 使用Playwright进行页面交互 ###

使用Playwright可以方便地进行页面交互，只需要以下几个步骤：

*  创建一个浏览器对象：`from playwright.sync_api import Playwright, sync_playwright_with_timeout; browser_type = sync_playwright_with_timeout().start().chromium; browser = browser_type.launch(headless=True)`
 *  创建一个页面对象：`page = browser.new_page()`
 *  进入一个页面：`page.goto('https://www.example.com')`
 *  点击一个元素：`page.click('#element-id')`
 *  输入文本：`page.type('#input-id', 'text')`
 *  暂停执行：`page.pause()`
 *  关闭浏览器：`browser.close()`

## 实战示列 ##

以下是一些简单的 Playwright 的 Demo 教程：

### 1、打开浏览器 ###

这个例子演示了如何打开 Chromium 浏览器并打开 Google 首页。`headless=False` 参数表示以可见的方式启动浏览器。

### 2、搜索关键词 ###

from playwright.sync_api import Playwright, sync_playwright_with_timeout
    with sync_playwright_with_timeout() as playwright:
        browser = playwright.chromium.launch(headless=False)
        page = browser.new_page()
        page.goto("https://www.google.com")
        page.fill('input[name="q"]', "Python Playwright")
        page.press('input[name="q"]', "Enter")
        results = page.wait_for_selector("#search")
        print(results.text_content())
        browser.close()

这个例子演示了如何搜索关键词，并获取搜索结果。`page.fill()` 和 `page.press()` 方法用于在搜索框中输入和提交关键词，`page.wait_for_selector()` 方法用于等待搜索结果页面加载完毕并返回结果元素。`results.text_content()` 返回搜索结果的文本内容。

### 3、截屏 ###

这个例子演示了如何对打开的页面进行截屏，`page.screenshot()` 方法用于对页面进行截屏并保存到指定路径下。

这些是 Playwright 的一些简单的 Demo 教程，可以帮助你了解 Playwright 的基本用法。更多高级用法可以参考 Playwright 的官方文档：https://playwright.dev/docs/

### 4、 多页面跳转 ###

这个 Demo 展示了如何在多个页面之间进行导航，比如在登录后跳转到另一个页面。

import asyncio
    from playwright.async_api import Playwright, async_playwright
    
    async def navigate_to_another_page(playwright: Playwright):
        # 启动浏览器
        browser = await playwright.chromium.launch(headless=False)
        page = await browser.new_page()
    
        # 打开第一个页面
        await page.goto('https://example.com')
    
        # 在第一个页面上点击链接
        await page.click('a')
        # 等待页面加载完成
        await page.wait_for_selector('#second-page')
    
        # 获取新页面
        pages = await browser.pages()
        new_page = pages[-1]
    
        # 在新页面上执行操作
        await new_page.fill('#username', 'John Doe')
        await new_page.fill('#password', 'password')
        await new_page.click('#login')
    
        # 关闭浏览器
        await browser.close()
    
    async with async_playwright() as playwright:
        asyncio.run(navigate_to_another_page(playwright))

### 4、文件上传 ###

这个 Demo 展示了如何在 Playwright 中模拟文件上传，比如在表单中上传文件。

import asyncio
    from pathlib import Path
    from playwright.async_api import Playwright, async_playwright
    
    async def upload_file(playwright: Playwright):
        # 启动浏览器
        browser = await playwright.chromium.launch(headless=False)
        page = await browser.new_page()
    
        # 打开上传页面
        await page.goto('https://example.com/upload')
    
        # 选择文件并上传
        file_path = Path('/path/to/file')
        input_element = await page.query_selector('input[type=file]')
        await input_element.set_input_files(str(file_path))
        await page.click('input[type=submit]')
    
        # 等待页面加载完成
        await page.wait_for_selector('#upload-success')
    
        # 关闭浏览器
        await browser.close()
    
    async with async_playwright() as playwright:
        asyncio.run(upload_file(playwright))

### 5、模拟移动设备 ###

这个 Demo 展示了如何在 Playwright 中模拟移动设备，比如在手机浏览器上运行测试。

import asyncio
    from playwright.async_api import Playwright, async_playwright
    
    async def simulate_mobile_device(playwright: Playwright):
        # 启动浏览器
        browser = await playwright.chromium.launch(headless=False)
        context = await browser.new_context(
            **playwright.devices['iPhone 11 Pro'],
            viewport=playwright.devices['iPhone 11 Pro']['viewport']
        )
        page = await context.new_page()
    
        # 在手机浏览器上打开页面
        await page.goto('https://example.com')
    
        # 在手机浏览器上执行操作
        await page.fill('#username', 'John Doe')
        await page.fill('#password', 'password')
        await page.click('#login')
    
        # 关闭浏览器
        await browser.close()
    
    async with async_playwright() as playwright:
        asyncio.run(simulate_mobile_device(playwright))

### 6、自动化截图 ###

使用Playwright可以很方便地进行自动化截图，只需要以下几个步骤：

*  安装Playwright：`pip install playwright`
 *  创建一个浏览器对象：`from playwright.sync_api import Playwright, sync_playwright_with_timeout; browser_type = sync_playwright_with_timeout().start().chromium; browser = browser_type.launch(headless=True)`
 *  创建一个页面对象：`page = browser.new_page()`
 *  进入一个页面：`page.goto('https://www.example.com')`
 *  截取整个页面：`page.screenshot(path='example.png')`
 *  关闭浏览器：`browser.close()`

完整代码示例：

from playwright.sync_api import Playwright, sync_playwright_with_timeout
    # 启动浏览器
    browser_type = sync_playwright_with_timeout().start().chromium
    browser = browser_type.launch(headless=True)
    
    # 创建页面对象
    page = browser.new_page()
    
    # 进入页面并截图
    page.goto('https://www.example.com')
    page.screenshot(path='example.png')
    
    # 关闭浏览器
    browser.close()

### 7、使用Playwright进行表单填写和提交 ###

使用Playwright可以方便地进行表单填写和提交，只需要以下几个步骤：

*  创建一个浏览器对象：`from playwright.sync_api import Playwright, sync_playwright_with_timeout; browser_type = sync_playwright_with_timeout().start().chromium; browser = browser_type.launch(headless=True)`
 *  创建一个页面对象：`page = browser.new_page()`
 *  进入一个页面：`page.goto('https://www.example.com')`
 *  填写表单：`page.fill('#username', 'myusername')`
 *  提交表单：`page.click('button[type="submit"]')`
 *  关闭浏览器：`browser.close()`

完整代码示例：

from playwright.sync_api import Playwright, sync_playwright_with_timeout
    
    # 启动浏览器
    browser_type = sync_playwright_with_timeout().start().chromium
    browser = browser_type.launch(headless=True)
    
    # 创建页面对象
    page = browser.new_page()
    
    # 进入页面并填写表单
    page.goto('https://www.example.com')
    page.fill('#username', 'myusername')
    
    # 提交表单
    page.click('button[type="submit"]')
    
    # 关闭浏览器
    browser.close()

## 补充总结 ##

1、使用 Playwright 的录制功能来自动生成测试脚本。

Playwright 提供了一个录制工具，可以在浏览器中执行一些操作并自动生成测试脚本，这样可以大大减少编写测试脚本的时间和工作量。具体使用方法可以参考 Playwright 官方文档。

2、使用 Playwright 内置的截图功能来捕捉测试过程中的截图。

Playwright 提供了内置的截图功能，可以捕捉测试过程中的任何时刻的屏幕截图，方便后续的问题分析和排查。具体使用方法可以参考 Playwright 官方文档。

3、使用 Playwright 的多语言支持，例如 Python、Java、C\# 等。

Playwright 提供了多语言支持，您可以使用您最熟悉的编程语言来编写测试脚本，例如 Python、Java、C\# 等。具体使用方法可以参考 Playwright 官方文档中对应的语言文档。

4、使用 Playwright 的多浏览器支持，例如 Chrome、Firefox、Edge 等。

Playwright 提供了多浏览器支持，您可以使用多个浏览器来执行测试脚本，例如 Chrome、Firefox、Edge 等。具体使用方法可以参考 Playwright 官方文档。

5、使用 Playwright 的无头模式，来实现在无界面浏览器中运行测试脚本。

Playwright 提供了无头模式，可以在无界面的浏览器中运行测试脚本，这样可以大大提高测试效率和减少运行测试脚本的资源消耗。具体使用方法可以参考 Playwright 官方文档。

6、使用 Playwright 的网络拦截功能，来模拟不同的网络环境和测试网络请求。

Playwright 提供了网络拦截功能，可以模拟不同的网络环境和测试网络请求，例如模拟慢速网络、模拟请求失败等。具体使用方法可以参考 Playwright 官方文档。

7、使用 Playwright 的多页面支持，来测试复杂的多页面应用程序。

Playwright 提供了多页面支持，可以测试复杂的多页面应用程序，例如跨页面的交互、页面之间的导航等。具体使用方法可以参考 Playwright 官方文档。

**最后：**下方这份完整的软件测试视频学习教程已经整理上传完成，朋友们如果需要可以自行免费领取**【保证100%免费】**

![在这里插入图片描述][9d205f76a3bb49d8bce29972548618fa.png_pic_center]

### 软件测试面试文档 ###

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

![图片][5edae9a0b47e4dfc8a71a369c5468e60.png]

![40274d9cdf6c4c0fa51dd7fa6e8fb585.gif][]

![59dbff5ad55448b6aec3b2ae6b2a4288.gif][]

[9d205f76a3bb49d8bce29972548618fa.png_pic_center]: https://img-blog.csdnimg.cn/9d205f76a3bb49d8bce29972548618fa.png#pic_center
[5edae9a0b47e4dfc8a71a369c5468e60.png]: https://img-blog.csdnimg.cn/5edae9a0b47e4dfc8a71a369c5468e60.png
[40274d9cdf6c4c0fa51dd7fa6e8fb585.gif]: https://img-blog.csdnimg.cn/40274d9cdf6c4c0fa51dd7fa6e8fb585.gif
[59dbff5ad55448b6aec3b2ae6b2a4288.gif]: https://img-blog.csdnimg.cn/59dbff5ad55448b6aec3b2ae6b2a4288.gif