3.3.2 Playwright——Web自动化新宠

初识Playwright——Web自动化新宠

课程目标

理解Playwright是什么以及它的优势。
学会安装Playwright及其浏览器驱动。
掌握Playwright的基本使用方法
学习如何生成和运行自动化测试脚本。
学会创建和管理浏览器上下文。
掌握页面导航、元素定位和事件监听。

课程内容

1. Playwright简介

Playwright是一款强大的自动化测试工具，支持现代Web应用程序的自动化测试。它支持以下浏览器：

Chromium
Firefox
WebKit

2. 安装Playwright

我们可以通过pip或conda来安装Playwright。以下是安装命令：

# 使用pip安装
pip install playwright
playwright install# 使用conda安装
conda install playwright -c conda-forge
playwright install

3. 基本使用

from playwright.sync_api import sync_playwrightwith sync_playwright() as p:browser = p.chromium.launch(headless=False)page = browser.new_page()page.goto('http://www.baidu.com')print(page.title())browser.close()

4. 浏览器上下文

浏览器上下文允许我们在隔离的环境中运行测试，每个上下文都是独立的。

创建浏览器上下文示例：

# 同步模式
context = browser.new_context()

5. 页面导航和元素交互

我们可以在页面上执行点击、填写表单等操作。

页面导航和元素交互示例：

page.goto('https://example.com/login')
page.fill('input[name="username"]', 'user1')
page.click('text=Sign in')

元素定位

CSS选择器：使用CSS选择器定位元素，例如page.locator(‘.my-class’)可以定位页面上所有具有"my-class"类的元素。
XPath：使用XPath表达式来定位元素，例如page.locator(‘//div[@id=“my-id”]’)可以定位页面上所有id为"my-id"的div元素。
文本内容：使用page.locator(‘:text(“my text”)’)来定位包含特定文本的元素，例如page.locator(‘:text(“Hello, World!”)’)可以定位页面上所有包含"Hello, World!"文本的元素。
特性选择器：使用page.locator(‘input[name=“username”]’)可以定位页面上所有name属性为"username"的input元素。
ID选择器：使用page.locator(‘#my-id’)可以定位页面上id为"my-id"的元素。
类选择器：使用page.locator(‘.my-class’)可以定位页面上所有具有"my-class"类的元素。
标签名选择器：使用page.locator(‘div’)可以定位页面上所有的div元素。
链式定位：page.locator()的返回值本身也有locator()方法，可以链式地定位元素，例如page.locator(‘.my-class’).locator(‘.my-subclass’)会定位到所有具有"my-class"类的元素中，再次具有"my-subclass"类的元素。

获取值

在Python的Playwright中，获取页面上的数据内容可以通过以下几种方法：

获取文本内容：使用inner_text()方法获取元素的文本内容。
```
text = page.locator('#my-id').inner_text()
```
获取HTML内容：使用inner_html()方法获取元素的HTML内容。
```
html_content = page.locator('#my-id').inner_html()
```
获取属性值：使用get_attribute('attribute_name')方法获取元素的特定属性值。
```
value = page.locator('#my-id').get_attribute('value')
```
获取元素的值：对于输入框等元素，使用input_value()方法获取其值。
```
input_value = page.locator('input[name="my-input"]').input_value()
```
JavaScript评估：使用evaluate()方法在页面中执行JavaScript代码，并获取返回值。
```
result = page.locator('#my-id').evaluate('el => el.textContent')
```

拖动

# 定位源元素
source = page.locator("#source-element")# 指定拖动的目标位置，以像素为单位
target_x = 100  # 目标元素的x坐标
target_y = 200  # 目标元素的y坐标# 执行拖动操作到指定位置
page.mouse.drag_and_drop_by(source, target_x, target_y)

等待

在Python的Playwright中，等待（Waiting）是一种重要的机制，用于确保在执行某些操作之前页面达到了某个特定的状态。以下是一些常用的等待方法：

等待元素出现：wait_for()，等待一个元素出现。
```
element = page.locator('selector').wait_for()
```
等待元素消失：wait_for({ state: 'hidden' })，等待元素不再可见或在页面上被隐藏。
```
element.wait_for({ state: 'hidden' })
```
等待元素可交互：wait_for({ state: 'attach' })，等待元素被附加到页面的DOM上。
```
element.wait_for({ state: 'attach' })
```
等待导航完成：wait_for_navigation()，等待页面导航到新的URL。
```
page.wait_for_navigation()
```
等待元素满足某个条件：wait_for({ visible: true })，等待元素可见。
```
element.wait_for({ visible: true })
```
等待元素属性变化：wait_for({ has_attribute: 'attribute_name' })，等待元素获得某个属性。
```
element.wait_for({ has_attribute: 'attribute_name' })
```
等待元素文本变化：wait_for({ has_text: 'text_content' })，等待元素包含特定的文本。
```
element.wait_for({ has_text: 'text_content' })
```
等待元素满足自定义条件：wait_for_selector()，等待页面上出现匹配特定选择器的元素。
```
page.wait_for_selector('selector')
```
等待元素数量：wait_for({ count: number })，等待页面上匹配选择器的元素数量达到指定数目。
```
element.wait_for({ count: 3 })
```
等待超时：所有等待方法都接受一个timeout参数，允许你设置等待的最长时间。
```
element.wait_for({ visible: true }, timeout=5000)  # 等待最多5秒
```
等待元素可被滚动到：wait_for({ scrollable: true })，等待元素可被滚动到视图中。
```
element.wait_for({ scrollable: true })
```
等待元素不被抛出异常：wait_for({ no_exceptions: true })，等待元素不会引起JavaScript异常。
```
element.wait_for({ no_exceptions: true })
```
等待页面加载完成
```
page.wait_for_load_state()
```

截图

对整个页面截图

page.screenshot(path='screenshot.png')  # 保存截图

对特定元素截图

element = page.locator('selector')  # 定位到元素
element.screenshot(path='element_screenshot.png')  # 对该元素截图并保存

6. 录制自动化脚本

Playwright可以生成自动化测试脚本。

playwright codegen https://example.com