|
|
import {Locator, Page} from '@playwright/test';
|
|
|
import {AdminPage} from '../../AdminPage';
|
|
|
|
|
|
/**
|
|
|
* GrowthSection
|
|
|
* 封装文章分析页面中 “Growth（增长）” 区块的定位器与常用交互。
|
|
|
* 该区块通常包含成员相关摘要与“View more”按钮用于展开详情。
|
|
|
*/
|
|
|
class GrowthSection extends AdminPage {
|
|
|
// Growth 卡片容器定位器（使用 data-testid）
|
|
|
readonly card: Locator;
|
|
|
// Growth 卡片内的“View more”按钮定位器
|
|
|
readonly viewMoreButton: Locator;
|
|
|
|
|
|
constructor(page: Page) {
|
|
|
super(page);
|
|
|
|
|
|
// 通过 data-testid 定位 growth 卡片，便于稳定选择
|
|
|
this.card = this.page.getByTestId('growth');
|
|
|
// 在卡片内查找名为 'View more' 的按钮（用于查看更详细的增长数据）
|
|
|
this.viewMoreButton = this.card.getByRole('button', {name: 'View more'});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* WebPerformanceSection
|
|
|
* 封装文章分析页面中 “Web performance（网站表现）” 区块的定位器与常用交互。
|
|
|
* 包含唯一访客数的定位器与“View more”按钮。
|
|
|
*/
|
|
|
class WebPerformanceSection extends AdminPage {
|
|
|
// Web performance 卡片容器定位器
|
|
|
readonly card: Locator;
|
|
|
// 卡片内显示“unique visitors（唯一访客）”的元素定位器
|
|
|
readonly uniqueVisitors: Locator;
|
|
|
// 卡片内的“View more”按钮定位器
|
|
|
readonly viewMoreButton: Locator;
|
|
|
|
|
|
constructor(page: Page) {
|
|
|
super(page);
|
|
|
|
|
|
// 使用 data-testid 定位 web-performance 卡片
|
|
|
this.card = this.page.getByTestId('web-performance');
|
|
|
// 在卡片内定位显示唯一访客数的元素
|
|
|
this.uniqueVisitors = this.card.getByTestId('unique-visitors');
|
|
|
// 在卡片内定位“View more”按钮（用于查看流量详情）
|
|
|
this.viewMoreButton = this.card.getByRole('button', {name: 'View more'});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* PostAnalyticsPage
|
|
|
* 文章分析页面的页面对象，聚合了不同分析视图（Overview / Web traffic / Growth）
|
|
|
* 以及对应区块（growthSection, webPerformanceSection），并提供页面加载等待方法。
|
|
|
*/
|
|
|
export class PostAnalyticsPage extends AdminPage {
|
|
|
// 页面上方的导航/选项按钮：Overview、Web traffic、Growth
|
|
|
readonly overviewButton: Locator;
|
|
|
readonly webTrafficButton: Locator;
|
|
|
readonly growthButton: Locator;
|
|
|
|
|
|
// 区块对象，分别封装 Growth 和 Web Performance 子区域的定位器/操作
|
|
|
readonly growthSection: GrowthSection;
|
|
|
readonly webPerformanceSection: WebPerformanceSection;
|
|
|
|
|
|
constructor(page: Page) {
|
|
|
super(page);
|
|
|
// 设置此页面对应的路由（用于 goto() 或页面断言）
|
|
|
this.pageUrl = '/ghost/#/analytics';
|
|
|
|
|
|
// 使用可访问性角色定位顶部视图切换按钮，便于稳定点击
|
|
|
this.overviewButton = this.page.getByRole('button', {name: 'Overview'});
|
|
|
this.webTrafficButton = this.page.getByRole('button', {name: 'Web traffic'});
|
|
|
this.growthButton = this.page.getByRole('button', {name: 'Growth'});
|
|
|
|
|
|
// 初始化子区块页面对象，传入同一 page 实例以共享上下文
|
|
|
this.growthSection = new GrowthSection(page);
|
|
|
this.webPerformanceSection = new WebPerformanceSection(page);
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* waitForPageLoad
|
|
|
* 等待文章分析页面加载完成的简单策略：等待 webPerformanceSection 卡片可见。
|
|
|
* 该方法用于在测试中确保页面元素可交互，避免因为异步渲染导致的点击失败。
|
|
|
*/
|
|
|
async waitForPageLoad() {
|
|
|
await this.webPerformanceSection.card.waitFor({state: 'visible'});
|
|
|
}
|
|
|
}
|
|
|
|
