快捷導航

Python中Playwright 頁面操作基礎(chǔ)的示例代碼

更新時間：2026年01月22日 11:08:56 作者：yingjuxia.com

Playwright 提供強大的頁面操作功能,具備自動等待機制,無需手動添加等待,本文就來介紹一下Python中Playwright頁面操作基礎(chǔ),感興趣的可以了解一下

Playwright 的頁面操作非常強大且直觀，核心優(yōu)勢在于自動等待（Auto-waiting）：大多數(shù)操作會在元素真正可交互時才執(zhí)行，無需手動添加 sleep() 或顯式等待。下面以 Node.js/TypeScript（Playwright Test 框架）為主進行講解，同時附上 Python 對應(yīng)寫法。

1.基本導航操作

// 導航到頁面
await page.goto('https://example.com');

// 刷新頁面
await page.reload();

// 前進 / 后退
await page.goBack();
await page.goForward();

2.元素定位（Locators）——最推薦方式

Playwright 強烈推薦使用 Locator 而不是直接的 page.$()，因為 Locator 是惰性求值的，支持自動等待。

// 推薦的現(xiàn)代定位方式（自動等待 + 鏈式調(diào)用）
const button = page.getByRole('button', { name: '提交' });           // 無障礙角色
const link = page.getByText('點擊這里');                            // 精確文本
const partialLink = page.getByText('點擊', { exact: false });      // 部分匹配
const input = page.getByLabel('用戶名');                            // 標簽關(guān)聯(lián)
const placeholder = page.getByPlaceholder('請輸入用戶名');         // placeholder
const alt = page.getByAltText('logo');                              // 圖片 alt
const title = page.getByTitle('關(guān)閉');                              // title 屬性
const testId = page.getByTestId('submit-btn');                      // data-testid（推薦！）
const css = page.locator('#login-form input[type="password"]');     // 傳統(tǒng) CSS

3.常用交互操作

// 點擊
await page.getByRole('button', { name: '登錄' }).click();

// 雙擊 / 右鍵
await button.dblclick();
await button.click({ button: 'right' });

// 輸入文本
await page.getByLabel('用戶名').fill('admin');           // 清空后輸入（推薦）
await page.getByLabel('密碼').type('123456');            // 逐字符輸入（模擬真人）

// 清除輸入框
await input.clear();

// 勾選 / 取消勾選 Checkbox 或 Radio
await page.getByRole('checkbox', { name: '記住我' }).check();
await page.getByRole('checkbox').uncheck();

// 下拉選擇 Select
await page.getByLabel('國家').selectOption('cn');                 // value 值
await page.getByLabel('國家').selectOption({ label: '中國' });    // 可見文本
await page.getByLabel('國家').selectOption({ index: 2 });         // 索引

// 上傳文件
await page.getByLabel('上傳頭像').setInputFiles('path/to/file.jpg');
// 多文件
await input.setInputFiles(['file1.jpg', 'file2.png']);
// 清除上傳
await input.setInputFiles([]);

4.鼠標與鍵盤操作

// 鼠標懸停
await page.getByText('菜單').hover();

// 拖拽
await page.locator('#source').dragTo(page.locator('#target'));

// 鍵盤操作
await page.keyboard.press('Enter');
await page.keyboard.press('Control+A');      // 組合鍵
await page.keyboard.type('Hello World');    // 輸入文本
await page.keyboard.down('Shift');          // 按住
await page.keyboard.up('Shift');            // 釋放

5.頁面信息獲取

// 獲取頁面標題和 URL
const title = await page.title();
const url = await page.url();

// 獲取元素文本
const text = await page.getByRole('heading').textContent();
const allTexts = await page.getByRole('listitem').allTextContents();

// 獲取輸入框值
const value = await page.getByLabel('用戶名').inputValue();

// 獲取屬性
const href = await page.getByRole('link').getAttribute('href');

6.截圖與錄屏

// 全頁面截圖
await page.screenshot({ path: 'full.png', fullPage: true });

// 元素截圖
await page.getByRole('button').screenshot({ path: 'button.png' });

// 錄制視頻（需在 playwright.config.ts 中啟用）
await page.video().saveAs('video.webm');

7.Python 同步版對應(yīng)示例

# 點擊
page.get_by_role("button", name="登錄").click()

# 輸入
page.get_by_label("用戶名").fill("admin")
page.get_by_label("密碼").fill("123456")

# 選擇下拉
page.get_by_label("國家").select_option("cn")

# 上傳文件
page.get_by_label("上傳").set_input_files("file.jpg")

# 截圖
page.screenshot(path="screenshot.png", full_page=True)