Playwright(Java版) - 7: Playwright 页面临象模子（POM）

页面临象模子（Page Object Model, 简称 POM）是一种用于提升测试代码可维护性和可读性的计划模式。在自动化测试中，POM 通过将页面元素及其操纵封装为对象，简化了测试用例的编写并进步了代码复用性。
  1 什么是页面临象模子？

页面临象模子是一种基于对象的计划模式，用于将页面的结构和行为封装为独立的类。每个页面类代表一个特定的页面或组件，包含以下内容：

• 页面元素： 页面的 DOM 元素（例如输入框、按钮等）。
  
• 页面行为： 操纵这些元素的方法（例如填写表单、点击按钮等）。
  

POM 的核心头脑是通过分离测试逻辑和页面细节，提升代码的可维护性和复用性。
POM 的优点：

• 进步代码复用性： 页面操纵方法可以被多个测试用例复用。
  
• 低落维护本钱： 页面结构发生变化时，只需更新对应的页面类。
  
• 提升可读性： 测试用例更专注于测试逻辑，而不是底层页面实现细节。
  

---

2 利用 POM 优化测试代码结构

POM 实现的基本步骤：

• 创建页面类，用于封装页面元素及操纵。
  
• 将页面类与测试用例分离。
  
• 在测试用例中调用页面类的方法完成操纵。
  

目录结构：

1. src/test/java
2. ├── pages/
3. │   ├── LoginPage.java
4. │   ├── RegistrationPage.java
5. │   └── ProductPage.java
6. └── tests/
7.     ├── LoginTests.java
8.     ├── RegistrationTests.java
9.     └── ProductTests.java

复制代码

---

3 在 POM 中集成 Playwright

以下是 POM 在 Playwright 中的具体实现步骤：
1. 创建页面类

以登录页面为例：

1. package pages;
3. import com.microsoft.playwright.Page;
5. public class LoginPage {
6.     private final Page page;
8.     // 构造函数
9.     public LoginPage(Page page) {
10.         this.page = page;
11.     }
13.     // 页面元素
14.     private final String usernameInput = "#username";
15.     private final String passwordInput = "#password";
16.     private final String loginButton = "button[type='submit']";
18.     // 页面操作方法
19.     public void navigateToLoginPage(String url) {
20.         page.navigate(url);
21.     }
23.     public void enterUsername(String username) {
24.         page.fill(usernameInput, username);
25.     }
27.     public void enterPassword(String password) {
28.         page.fill(passwordInput, password);
29.     }
31.     public void clickLoginButton() {
32.         page.click(loginButton);
33.     }
35.     public String getWelcomeMessage() {
36.         return page.textContent("h1");
37.     }
38. }

复制代码

2. 在测试用例中利用页面类

创建一个测试类 LoginTests.java，并调用 LoginPage 的方法完成测试：

1. package tests;
3. import com.microsoft.playwright.*;
4. import org.testng.annotations.*;
5. import pages.LoginPage;
7. public class LoginTests {
8.     private Playwright playwright;
9.     private Browser browser;
10.     private BrowserContext context;
11.     private Page page;
12.     private LoginPage loginPage;
14.     @BeforeClass
15.     public void setup() {
16.         playwright = Playwright.create();
17.         browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
18.         context = browser.newContext();
19.         page = context.newPage();
20.         loginPage = new LoginPage(page);
21.     }
23.     @AfterClass
24.     public void tearDown() {
25.         page.close();
26.         context.close();
27.         browser.close();
28.         playwright.close();
29.     }
31.     @Test
32.     public void testValidLogin() {
33.         loginPage.navigateToLoginPage("https://example.com/login");
34.         loginPage.enterUsername("testuser");
35.         loginPage.enterPassword("password123");
36.         loginPage.clickLoginButton();
37.         String welcomeMessage = loginPage.getWelcomeMessage();
38.         assert welcomeMessage.equals("Welcome, testuser!");
39.     }
40. }

复制代码

---

-

功能形貌：
实现一个支持多语言登录页面的 POM 模块，包罗以下功能：

• 输入用户名和暗码。
  
• 切换语言。
  
• 验证登录后是否乐成。
  

页面类实现：

1. package pages;
3. import com.microsoft.playwright.Page;
5. public class MultiLangLoginPage {
6.     private final Page page;
8.     // 构造函数
9.     public MultiLangLoginPage(Page page) {
10.         this.page = page;
11.     }
13.     // 页面元素
14.     private final String usernameInput = "#username";
15.     private final String passwordInput = "#password";
16.     private final String loginButton = "button[type='submit']";
17.     private final String languageSelector = "#language-dropdown";
19.     // 页面操作方法
20.     public void selectLanguage(String language) {
21.         page.selectOption(languageSelector, language);
22.     }
24.     public void enterCredentials(String username, String password) {
25.         page.fill(usernameInput, username);
26.         page.fill(passwordInput, password);
27.     }
29.     public void clickLoginButton() {
30.         page.click(loginButton);
31.     }
33.     public boolean isLoginSuccessful() {
34.         return page.isVisible("text=Welcome");
35.     }
36. }

复制代码

测试类实现：

1. package tests;
3. import com.microsoft.playwright.*;
4. import org.testng.annotations.*;
5. import pages.MultiLangLoginPage;
7. public class MultiLangLoginTests {
8.     private Playwright playwright;
9.     private Browser browser;
10.     private BrowserContext context;
11.     private Page page;
12.     private MultiLangLoginPage loginPage;
14.     @BeforeClass
15.     public void setup() {
16.         playwright = Playwright.create();
17.         browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
18.         context = browser.newContext();
19.         page = context.newPage();
20.         loginPage = new MultiLangLoginPage(page);
21.     }
23.     @AfterClass
24.     public void tearDown() {
25.         page.close();
26.         context.close();
27.         browser.close();
28.         playwright.close();
29.     }
31.     @Test
32.     public void testLoginInEnglish() {
33.         loginPage.selectLanguage("en");
34.         loginPage.enterCredentials("testuser", "password123");
35.         loginPage.clickLoginButton();
36.         assert loginPage.isLoginSuccessful();
37.     }
39.     @Test
40.     public void testLoginInFrench() {
41.         loginPage.selectLanguage("fr");
42.         loginPage.enterCredentials("utilisateur", "motdepasse");
43.         loginPage.clickLoginButton();
44.         assert loginPage.isLoginSuccessful();
45.     }
46. }

复制代码