playwright基础教程

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、打开浏览器

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")
    print(page.title())
    browser.close()

这个例子演示了如何打开 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、截屏

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.screenshot(path="google.png")
    browser.close()

这个例子演示了如何对打开的页面进行截屏，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 官方文档。