Playwright(Java版) - 7: Playwright 页面对象模型（POM）
页面对象模型（Page Object Model, 简称 POM）是一种用于提升测试代码可维护性和可读性的设计模式。在自动化测试中，POM 通过将页面元素及其操作封装为对象，简化了测试用例的编写并提高了代码复用性。
1 什么是页面对象模型？
页面对象模型是一种基于对象的设计模式，用于将页面的结构和行为封装为独立的类。每个页面类代表一个特定的页面或组件，包含以下内容：
- 页面元素： 页面的 DOM 元素（例如输入框、按钮等）。
- 页面行为： 操作这些元素的方法（例如填写表单、点击按钮等）。
POM 的核心思想是通过分离测试逻辑和页面细节，提升代码的可维护性和复用性。
POM 的优点：
- 提高代码复用性： 页面操作方法可以被多个测试用例复用。
- 降低维护成本： 页面结构发生变化时，只需更新对应的页面类。
- 提升可读性： 测试用例更专注于测试逻辑，而不是底层页面实现细节。
2 使用 POM 优化测试代码结构
POM 实现的基本步骤：
- 创建页面类，用于封装页面元素及操作。
- 将页面类与测试用例分离。
- 在测试用例中调用页面类的方法完成操作。
目录结构：
src/test/java
├── pages/
│ ├── LoginPage.java
│ ├── RegistrationPage.java
│ └── ProductPage.java
└── tests/├── LoginTests.java├── RegistrationTests.java└── ProductTests.java
3 在 POM 中集成 Playwright
以下是 POM 在 Playwright 中的具体实现步骤：
1. 创建页面类
以登录页面为例：
package pages;import com.microsoft.playwright.Page;public class LoginPage {private final Page page;// 构造函数public LoginPage(Page page) {this.page = page;}// 页面元素private final String usernameInput = "#username";private final String passwordInput = "#password";private final String loginButton = "button[type='submit']";// 页面操作方法public void navigateToLoginPage(String url) {page.navigate(url);}public void enterUsername(String username) {page.fill(usernameInput, username);}public void enterPassword(String password) {page.fill(passwordInput, password);}public void clickLoginButton() {page.click(loginButton);}public String getWelcomeMessage() {return page.textContent("h1");}
}
2. 在测试用例中使用页面类
创建一个测试类 LoginTests.java，并调用 LoginPage 的方法完成测试：
package tests;import com.microsoft.playwright.*;
import org.testng.annotations.*;
import pages.LoginPage;public class LoginTests {private Playwright playwright;private Browser browser;private BrowserContext context;private Page page;private LoginPage loginPage;@BeforeClasspublic void setup() {playwright = Playwright.create();browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));context = browser.newContext();page = context.newPage();loginPage = new LoginPage(page);}@AfterClasspublic void tearDown() {page.close();context.close();browser.close();playwright.close();}@Testpublic void testValidLogin() {loginPage.navigateToLoginPage("https://example.com/login");loginPage.enterUsername("testuser");loginPage.enterPassword("password123");loginPage.clickLoginButton();String welcomeMessage = loginPage.getWelcomeMessage();assert welcomeMessage.equals("Welcome, testuser!");}
}
-
功能描述：
实现一个支持多语言登录页面的 POM 模块，包括以下功能：
- 输入用户名和密码。
- 切换语言。
- 验证登录后是否成功。
页面类实现：
package pages;import com.microsoft.playwright.Page;public class MultiLangLoginPage {private final Page page;// 构造函数public MultiLangLoginPage(Page page) {this.page = page;}// 页面元素private final String usernameInput = "#username";private final String passwordInput = "#password";private final String loginButton = "button[type='submit']";private final String languageSelector = "#language-dropdown";// 页面操作方法public void selectLanguage(String language) {page.selectOption(languageSelector, language);}public void enterCredentials(String username, String password) {page.fill(usernameInput, username);page.fill(passwordInput, password);}public void clickLoginButton() {page.click(loginButton);}public boolean isLoginSuccessful() {return page.isVisible("text=Welcome");}
}
测试类实现：
package tests;import com.microsoft.playwright.*;
import org.testng.annotations.*;
import pages.MultiLangLoginPage;public class MultiLangLoginTests {private Playwright playwright;private Browser browser;private BrowserContext context;private Page page;private MultiLangLoginPage loginPage;@BeforeClasspublic void setup() {playwright = Playwright.create();browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));context = browser.newContext();page = context.newPage();loginPage = new MultiLangLoginPage(page);}@AfterClasspublic void tearDown() {page.close();context.close();browser.close();playwright.close();}@Testpublic void testLoginInEnglish() {loginPage.selectLanguage("en");loginPage.enterCredentials("testuser", "password123");loginPage.clickLoginButton();assert loginPage.isLoginSuccessful();}@Testpublic void testLoginInFrench() {loginPage.selectLanguage("fr");loginPage.enterCredentials("utilisateur", "motdepasse");loginPage.clickLoginButton();assert loginPage.isLoginSuccessful();}
}