Playwright(Java版) - 7: Playwright 页面对象模型（POM）

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

1 什么是页面对象模型？

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

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

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

POM 的优点：

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

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

POM 实现的基本步骤：

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

目录结构：

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;

    @BeforeClass
    public void setup() {
        playwright = Playwright.create();
        browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
        context = browser.newContext();
        page = context.newPage();
        loginPage = new LoginPage(page);
    }

    @AfterClass
    public void tearDown() {
        page.close();
        context.close();
        browser.close();
        playwright.close();
    }

    @Test
    public 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 模块，包括以下功能：

1. 输入用户名和密码。
2. 切换语言。
3. 验证登录后是否成功。

页面类实现：

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;

    @BeforeClass
    public void setup() {
        playwright = Playwright.create();
        browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
        context = browser.newContext();
        page = context.newPage();
        loginPage = new MultiLangLoginPage(page);
    }

    @AfterClass
    public void tearDown() {
        page.close();
        context.close();
        browser.close();
        playwright.close();
    }

    @Test
    public void testLoginInEnglish() {
        loginPage.selectLanguage("en");
        loginPage.enterCredentials("testuser", "password123");
        loginPage.clickLoginButton();
        assert loginPage.isLoginSuccessful();
    }

    @Test
    public void testLoginInFrench() {
        loginPage.selectLanguage("fr");
        loginPage.enterCredentials("utilisateur", "motdepasse");
        loginPage.clickLoginButton();
        assert loginPage.isLoginSuccessful();
    }
}