页面对象模型(Page Object Model)是一种设计模式,用于表示网页中的对象。在Playwright中,我们可以通过Page对象的Query Selector API 查找页面元素,并用它们创建页面对象模型。
页面对象模型的主要优点是:
• 降低脚本的重复性。避免在测试脚本中多次使用相同的定位策略查找同一元素。
• 当页面元素发生变化时,只需要在页面对象模型中修改,而不需要改变整个测试脚本。这使得测试脚本具有很好的维护性。
• 页面对象可以进一步封装页面操作,简化测试脚本的逻辑。
Python示例
下面以example.com网站为例,演示如何构建页面对象模型。
页面对象模型如下:
代码语言：javascript复制class Page:
def __init__(self, page):
self.page = page
def header(self):
return Header(self.page)
class Header:
def __init__(self, page):
self.page = page
def logo(self):
return self.page.query_selector('.example-logo')测试脚本使用页面对象模型:
代码语言：javascript复制from playwright.sync_api import sync_playwright
def run(playwright):
chromium = playwright.chromium
browser = chromium.launch()
page = browser.new_page()
page.goto("https://www.example.com/")
# 使用页面对象模型
page_obj = Page(page)
header = page_obj.header()
logo = header.logo()
print(logo.inner_text())
browser.close()
with sync_playwright() as playwright:
run(playwright)可以看到,测试脚本通过页面对象模型查找到页面元素logo,而不直接使用Query Selector API,这使得测试逻辑更清晰简洁。
Node.js示例
页面对象模型:
js
代码语言：javascript复制class Page {
constructor(page) {
this.page = page
}
header() {
return new Header(this.page)
}
}
class Header {
constructor(page) {
this.page = page
}
logo() {
return this.page.$('.example-logo')
}
}测试脚本:
代码语言：javascript复制const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://www.example.com/');
// 使用页面对象模型
const pageObj = new Page(page);
const header = pageObj.header();
const logo = header.logo();
console.log(await logo.innerText());
await browser.close();
})(); Java示例
页面对象模型:
代码语言：javascript复制public class Page {
private final Page page;
public Page(Page page) {
this.page = page;
}
public Header header() {
return new Header(page);
}
}
public class Header {
private final Page page;
public Header(Page page) {
this.page = page;
}
public ElementHandle logo() {
return page.querySelector(".example-logo");
}
}测试脚本:
代码语言：javascript复制import com.microsoft.playwright.*;
public class Example {
public static void main(String[] args) {
Playwright playwright = Playwright.create();
BrowserType chromium = playwright.chromium();
Browser browser = chromium.launch();
Page page = browser.newPage();
page.navigate("https://www.example.com/");
// 使用页面对象模型
Page pageObj = new Page(page);
Header header = pageObj.header();
ElementHandle logo = header.logo();
String text = logo.innerText();
System.out.println(text);
browser.close();
playwright.close();
}
}可以看到,三种语言的页面对象模型和测试脚本的基本结构都是相似的。至此我们已经理解了页面对象模型的概念,并掌握了在Playwright的三种语言中构建页面对象模型的方法。我们也简单了解了一些常用的Playwright测试框架。这些概念和工具可以帮助我们编写出更加健壮和可维护的Playwright测试脚本。
Playwright测试框架
除了手工构建页面对象模型,我们也可以选择使用Playwright开源的测试框架。这些框架提供了更高级的API,可以更方便地编写稳定的测试脚本。
部分推荐的Playwright测试框架如下:
• Playwright pytest fixture: 可以用pytest和Playwright一起工作,提供浏览器控制的fixture。
• Playwright Sharp: .NET版Playwright,提供C# API,可以在.NET项目中编写Playwright测试。
• Protractor: 最初是为AngularJS设计的E2E测试框架,现已扩展支持Playwright。
• Nightwatch.js: 一个Node.js的E2E测试解决方案,可以用Playwright作为驱动程序。
• Puppeteer-playwright-jest-preset: 一个Jest preset,可以在Jest中更方便地使用Playwright。
• TestCafe: 一个Node.js的E2E测试框架,支持Playwright作为其中一个驱动程序选项。
• Cypress: 一个流行的E2E测试框架,正在积极开发对Playwright的支持。
Playwright还与许多测试框架进行了深度集成,如Jest、JUnit、TestNG等,可以按需选择。
总结
在这一章,我们分别从Python、Node.js和Java三个语言详细讲解了如何构建页面对象模型。我们也概述了许多流行的Playwright测试框架,以及Playwright与现有框架的深度集成情况。
学习页面对象模型和测试框架的概念与用法,是熟练掌握Playwright并编写稳定测试脚本的重要一步。
