feat(e2e): 添加完整的E2E测试框架和测试用例
添加Playwright测试框架配置和基础页面对象 实现冒烟测试用例覆盖首页和联系页面核心功能 更新导航组件以支持滚动高亮功能 添加BackButton组件统一返回按钮行为 配置Woodpecker CI集成和测试报告生成
This commit is contained in:
张翔
@@ -0,0 +1,173 @@
|
||||
import { test, expect } from '../../fixtures/base.fixture';
|
||||
|
||||
test.describe('联系页面冒烟测试 @smoke', () => {
|
||||
test.beforeEach(async ({ contactPage }) => {
|
||||
await contactPage.goto();
|
||||
await contactPage.waitForPageLoad();
|
||||
});
|
||||
|
||||
test('应该成功加载联系页面', async ({ contactPage }) => {
|
||||
await expect(contactPage.page).toHaveURL(/\/contact/);
|
||||
await expect(contactPage.pageHeader).toBeVisible();
|
||||
await expect(contactPage.contactForm).toBeVisible();
|
||||
});
|
||||
|
||||
test('应该显示正确的页面标题', async ({ contactPage }) => {
|
||||
const title = await contactPage.getPageTitle();
|
||||
expect(title).toBeTruthy();
|
||||
expect(title.length).toBeGreaterThan(0);
|
||||
expect(title).toContain('联系');
|
||||
});
|
||||
|
||||
test('应该显示页面描述', async ({ contactPage }) => {
|
||||
const description = await contactPage.getPageDescription();
|
||||
expect(description).toBeTruthy();
|
||||
expect(description.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示页面徽章', async ({ contactPage }) => {
|
||||
const badge = await contactPage.getBadgeText();
|
||||
expect(badge).toBeTruthy();
|
||||
expect(badge).toBe('联系我们');
|
||||
});
|
||||
|
||||
test('应该显示联系表单', async ({ contactPage }) => {
|
||||
await expect(contactPage.contactForm).toBeVisible();
|
||||
await expect(contactPage.nameInput).toBeVisible();
|
||||
await expect(contactPage.emailInput).toBeVisible();
|
||||
await expect(contactPage.subjectInput).toBeVisible();
|
||||
await expect(contactPage.messageInput).toBeVisible();
|
||||
await expect(contactPage.submitButton).toBeVisible();
|
||||
});
|
||||
|
||||
test('应该显示所有表单字段', async ({ contactPage }) => {
|
||||
await expect(contactPage.nameInput).toBeVisible();
|
||||
await expect(contactPage.phoneInput).toBeVisible();
|
||||
await expect(contactPage.emailInput).toBeVisible();
|
||||
await expect(contactPage.subjectInput).toBeVisible();
|
||||
await expect(contactPage.messageInput).toBeVisible();
|
||||
});
|
||||
|
||||
test('应该显示联系信息卡片', async ({ contactPage }) => {
|
||||
await expect(contactPage.contactInfoCard).toBeVisible();
|
||||
await expect(contactPage.addressInfo).toBeVisible();
|
||||
await expect(contactPage.phoneInfo).toBeVisible();
|
||||
await expect(contactPage.emailInfo).toBeVisible();
|
||||
});
|
||||
|
||||
test('应该显示工作时间卡片', async ({ contactPage }) => {
|
||||
await expect(contactPage.workHoursCard).toBeVisible();
|
||||
const workHours = await contactPage.getWorkHours();
|
||||
expect(workHours.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示公司地址', async ({ contactPage }) => {
|
||||
const address = await contactPage.getAddress();
|
||||
expect(address).toBeTruthy();
|
||||
expect(address.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示联系电话', async ({ contactPage }) => {
|
||||
const phone = await contactPage.getPhone();
|
||||
expect(phone).toBeTruthy();
|
||||
expect(phone.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示电子邮箱', async ({ contactPage }) => {
|
||||
const email = await contactPage.getEmail();
|
||||
expect(email).toBeTruthy();
|
||||
expect(email.length).toBeGreaterThan(0);
|
||||
expect(email).toContain('@');
|
||||
});
|
||||
|
||||
test('应该显示提交按钮', async ({ contactPage }) => {
|
||||
await expect(contactPage.submitButton).toBeVisible();
|
||||
const buttonText = await contactPage.getSubmitButtonText();
|
||||
expect(buttonText).toContain('发送');
|
||||
});
|
||||
|
||||
test('应该能够输入姓名', async ({ contactPage }) => {
|
||||
const testName = '测试用户';
|
||||
await contactPage.nameInput.fill(testName);
|
||||
const value = await contactPage.getNameInputValue();
|
||||
expect(value).toBe(testName);
|
||||
});
|
||||
|
||||
test('应该能够输入电话', async ({ contactPage }) => {
|
||||
const testPhone = '13800138000';
|
||||
await contactPage.phoneInput.fill(testPhone);
|
||||
const value = await contactPage.getPhoneInputValue();
|
||||
expect(value).toBe(testPhone);
|
||||
});
|
||||
|
||||
test('应该能够输入邮箱', async ({ contactPage }) => {
|
||||
const testEmail = 'test@example.com';
|
||||
await contactPage.emailInput.fill(testEmail);
|
||||
const value = await contactPage.getEmailInputValue();
|
||||
expect(value).toBe(testEmail);
|
||||
});
|
||||
|
||||
test('应该能够输入主题', async ({ contactPage }) => {
|
||||
const testSubject = '测试主题';
|
||||
await contactPage.subjectInput.fill(testSubject);
|
||||
const value = await contactPage.getSubjectInputValue();
|
||||
expect(value).toBe(testSubject);
|
||||
});
|
||||
|
||||
test('应该能够输入消息内容', async ({ contactPage }) => {
|
||||
const testMessage = '这是一条测试消息';
|
||||
await contactPage.messageInput.fill(testMessage);
|
||||
const value = await contactPage.getMessageInputValue();
|
||||
expect(value).toBe(testMessage);
|
||||
});
|
||||
|
||||
test('应该显示必填字段标记', async ({ contactPage }) => {
|
||||
const isNameRequired = await contactPage.isFieldRequired('name');
|
||||
const isEmailRequired = await contactPage.isFieldRequired('email');
|
||||
const isSubjectRequired = await contactPage.isFieldRequired('subject');
|
||||
const isMessageRequired = await contactPage.isFieldRequired('message');
|
||||
|
||||
expect(isNameRequired).toBe(true);
|
||||
expect(isEmailRequired).toBe(true);
|
||||
expect(isSubjectRequired).toBe(true);
|
||||
expect(isMessageRequired).toBe(true);
|
||||
});
|
||||
|
||||
test('应该显示字段占位符', async ({ contactPage }) => {
|
||||
const namePlaceholder = await contactPage.getFieldPlaceholder('name');
|
||||
const emailPlaceholder = await contactPage.getFieldPlaceholder('email');
|
||||
const subjectPlaceholder = await contactPage.getFieldPlaceholder('subject');
|
||||
const messagePlaceholder = await contactPage.getFieldPlaceholder('message');
|
||||
|
||||
expect(namePlaceholder).toBeTruthy();
|
||||
expect(emailPlaceholder).toBeTruthy();
|
||||
expect(subjectPlaceholder).toBeTruthy();
|
||||
expect(messagePlaceholder).toBeTruthy();
|
||||
});
|
||||
|
||||
test('应该有正确的工作时间信息', async ({ contactPage }) => {
|
||||
const workHours = await contactPage.getWorkHours();
|
||||
expect(workHours.length).toBeGreaterThan(0);
|
||||
workHours.forEach(item => {
|
||||
expect(item.day).toBeTruthy();
|
||||
expect(item.hours).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
test('应该没有控制台错误', async ({ contactPage, page }) => {
|
||||
const errors: string[] = [];
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error') {
|
||||
errors.push(msg.text());
|
||||
}
|
||||
});
|
||||
await contactPage.waitForPageLoad();
|
||||
expect(errors.length).toBe(0);
|
||||
});
|
||||
|
||||
test('应该能够滚动到表单', async ({ contactPage }) => {
|
||||
await contactPage.scrollToForm();
|
||||
const isVisible = await contactPage.contactForm.isVisible();
|
||||
expect(isVisible).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,137 @@
|
||||
import { test, expect } from '../../fixtures/base.fixture';
|
||||
|
||||
test.describe('首页冒烟测试 @smoke', () => {
|
||||
test.beforeEach(async ({ homePage }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
});
|
||||
|
||||
test('应该成功加载首页', async ({ homePage }) => {
|
||||
await expect(homePage.page).toHaveURL(/\/$/);
|
||||
await expect(homePage.header).toBeVisible();
|
||||
await expect(homePage.heroSection).toBeVisible();
|
||||
await expect(homePage.footer).toBeVisible();
|
||||
});
|
||||
|
||||
test('应该显示正确的页面标题', async ({ homePage }) => {
|
||||
const title = await homePage.getTitle();
|
||||
expect(title).toBeTruthy();
|
||||
expect(title.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示Logo', async ({ homePage }) => {
|
||||
await expect(homePage.logo).toBeVisible();
|
||||
const altText = await homePage.getLogoAltText();
|
||||
expect(altText).toBeTruthy();
|
||||
});
|
||||
|
||||
test('应该显示主导航菜单', async ({ homePage }) => {
|
||||
await expect(homePage.navigation).toBeVisible();
|
||||
const navItems = await homePage.getNavigationItemCount();
|
||||
expect(navItems).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示所有主要区块', async ({ homePage }) => {
|
||||
await expect(homePage.heroSection).toBeVisible();
|
||||
await homePage.scrollToSection('services');
|
||||
await expect(homePage.servicesSection).toBeVisible();
|
||||
await homePage.scrollToSection('products');
|
||||
await expect(homePage.productsSection).toBeVisible();
|
||||
await homePage.scrollToSection('cases');
|
||||
await expect(homePage.casesSection).toBeVisible();
|
||||
await homePage.scrollToSection('about');
|
||||
await expect(homePage.aboutSection).toBeVisible();
|
||||
await homePage.scrollToSection('news');
|
||||
await expect(homePage.newsSection).toBeVisible();
|
||||
await homePage.scrollToSection('contact');
|
||||
await expect(homePage.contactSection).toBeVisible();
|
||||
});
|
||||
|
||||
test('应该显示页脚', async ({ homePage }) => {
|
||||
await homePage.scrollToBottom();
|
||||
await expect(homePage.footer).toBeVisible();
|
||||
const footerText = await homePage.getFooterText();
|
||||
expect(footerText.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该能够滚动到页面底部', async ({ homePage }) => {
|
||||
await homePage.scrollToBottom();
|
||||
const scrollPosition = await homePage.page.evaluate(() => window.scrollY);
|
||||
expect(scrollPosition).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该能够滚动到页面顶部', async ({ homePage }) => {
|
||||
await homePage.scrollToBottom();
|
||||
await homePage.scrollToTop();
|
||||
const scrollPosition = await homePage.page.evaluate(() => window.scrollY);
|
||||
expect(scrollPosition).toBe(0);
|
||||
});
|
||||
|
||||
test('应该显示Hero区块标题', async ({ homePage }) => {
|
||||
const title = await homePage.getHeroSectionTitle();
|
||||
expect(title).toBeTruthy();
|
||||
expect(title.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示Services区块标题', async ({ homePage }) => {
|
||||
await homePage.waitForServicesSection();
|
||||
const title = await homePage.getServicesSectionTitle();
|
||||
expect(title).toBeTruthy();
|
||||
expect(title.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示Products区块标题', async ({ homePage }) => {
|
||||
await homePage.waitForProductsSection();
|
||||
const title = await homePage.getProductsSectionTitle();
|
||||
expect(title).toBeTruthy();
|
||||
expect(title.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示Cases区块标题', async ({ homePage }) => {
|
||||
await homePage.waitForCasesSection();
|
||||
const title = await homePage.getCasesSectionTitle();
|
||||
expect(title).toBeTruthy();
|
||||
expect(title.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示About区块标题', async ({ homePage }) => {
|
||||
await homePage.waitForAboutSection();
|
||||
const title = await homePage.getAboutSectionTitle();
|
||||
expect(title).toBeTruthy();
|
||||
expect(title.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示News区块标题', async ({ homePage }) => {
|
||||
await homePage.waitForNewsSection();
|
||||
const title = await homePage.getNewsSectionTitle();
|
||||
expect(title).toBeTruthy();
|
||||
expect(title.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示Contact区块标题', async ({ homePage }) => {
|
||||
await homePage.waitForContactSection();
|
||||
const title = await homePage.getContactSectionTitle();
|
||||
expect(title).toBeTruthy();
|
||||
expect(title.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该有正确的导航标签', async ({ homePage }) => {
|
||||
const labels = await homePage.getAllNavigationLabels();
|
||||
expect(labels.length).toBeGreaterThan(0);
|
||||
labels.forEach(label => {
|
||||
expect(label).toBeTruthy();
|
||||
expect(label.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
test('应该没有控制台错误', async ({ homePage, page }) => {
|
||||
const errors: string[] = [];
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error') {
|
||||
errors.push(msg.text());
|
||||
}
|
||||
});
|
||||
await homePage.waitForPageLoad();
|
||||
expect(errors.length).toBe(0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,131 @@
|
||||
import { test, expect } from '../../fixtures/base.fixture';
|
||||
|
||||
test.describe('导航冒烟测试 @smoke', () => {
|
||||
test.beforeEach(async ({ homePage }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
});
|
||||
|
||||
test('应该显示主导航菜单', async ({ homePage }) => {
|
||||
await expect(homePage.navigation).toBeVisible();
|
||||
});
|
||||
|
||||
test('应该显示Logo链接', async ({ homePage }) => {
|
||||
await expect(homePage.logo).toBeVisible();
|
||||
const altText = await homePage.getLogoAltText();
|
||||
expect(altText).toBeTruthy();
|
||||
});
|
||||
|
||||
test('应该有导航项', async ({ homePage }) => {
|
||||
const navItems = await homePage.getNavigationItemCount();
|
||||
expect(navItems).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该能够点击导航项', async ({ homePage }) => {
|
||||
const labels = await homePage.getAllNavigationLabels();
|
||||
if (labels.length > 0) {
|
||||
await homePage.clickNavigationItem(labels[0]);
|
||||
await homePage.page.waitForTimeout(1000);
|
||||
}
|
||||
});
|
||||
|
||||
test('应该显示立即咨询按钮', async ({ homePage }) => {
|
||||
const contactButton = homePage.page.locator('a:has-text("立即咨询")').first();
|
||||
await expect(contactButton).toBeVisible();
|
||||
});
|
||||
|
||||
test('应该能够点击立即咨询按钮', async ({ homePage }) => {
|
||||
const contactButton = homePage.page.locator('a:has-text("立即咨询")').first();
|
||||
await contactButton.click();
|
||||
await homePage.page.waitForTimeout(2000);
|
||||
const url = homePage.page.url();
|
||||
console.log('点击立即咨询后的URL:', url);
|
||||
expect(url).toContain('/contact');
|
||||
});
|
||||
|
||||
test('应该显示移动端菜单按钮', async ({ homePage }) => {
|
||||
await expect(homePage.mobileMenuButton).toBeVisible();
|
||||
});
|
||||
|
||||
test('应该能够打开移动端菜单', async ({ homePage }) => {
|
||||
await homePage.openMobileMenu();
|
||||
await expect(homePage.mobileMenu).toBeVisible();
|
||||
});
|
||||
|
||||
test('应该能够关闭移动端菜单', async ({ homePage }) => {
|
||||
await homePage.openMobileMenu();
|
||||
await homePage.closeMobileMenu();
|
||||
await expect(homePage.mobileMenu).not.toBeVisible();
|
||||
});
|
||||
|
||||
test('应该有正确的导航标签', async ({ homePage }) => {
|
||||
const labels = await homePage.getAllNavigationLabels();
|
||||
expect(labels.length).toBeGreaterThan(0);
|
||||
labels.forEach(label => {
|
||||
expect(label).toBeTruthy();
|
||||
expect(label.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
test('应该能够滚动到各个区块', async ({ homePage }) => {
|
||||
const sections = ['services', 'products', 'cases', 'about', 'news', 'contact'];
|
||||
for (const sectionId of sections) {
|
||||
await homePage.scrollToSection(sectionId);
|
||||
const isVisible = await homePage.isSectionVisible(sectionId);
|
||||
expect(isVisible).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
test('应该能够滚动到页面顶部', async ({ homePage }) => {
|
||||
await homePage.scrollToBottom();
|
||||
await homePage.scrollToTop();
|
||||
const scrollPosition = await homePage.page.evaluate(() => window.scrollY);
|
||||
expect(scrollPosition).toBe(0);
|
||||
});
|
||||
|
||||
test('应该能够滚动到页面底部', async ({ homePage }) => {
|
||||
await homePage.scrollToBottom();
|
||||
const scrollPosition = await homePage.page.evaluate(() => window.scrollY);
|
||||
expect(scrollPosition).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该显示所有区块', async ({ homePage }) => {
|
||||
const sectionIds = await homePage.getAllSectionIds();
|
||||
expect(sectionIds.length).toBeGreaterThan(0);
|
||||
sectionIds.forEach(sectionId => {
|
||||
expect(sectionId).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
test('应该能够通过导航跳转到区块', async ({ homePage }) => {
|
||||
const labels = await homePage.getAllNavigationLabels();
|
||||
if (labels.length > 1) {
|
||||
await homePage.clickNavigationItem(labels[1]);
|
||||
await homePage.page.waitForTimeout(1000);
|
||||
const url = homePage.page.url();
|
||||
expect(url).toContain('#');
|
||||
}
|
||||
});
|
||||
|
||||
test('应该显示页脚', async ({ homePage }) => {
|
||||
await homePage.scrollToBottom();
|
||||
await expect(homePage.footer).toBeVisible();
|
||||
});
|
||||
|
||||
test('应该有正确的页面标题', async ({ homePage }) => {
|
||||
const title = await homePage.getTitle();
|
||||
expect(title).toBeTruthy();
|
||||
expect(title.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该没有控制台错误', async ({ homePage, page }) => {
|
||||
const errors: string[] = [];
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error') {
|
||||
errors.push(msg.text());
|
||||
}
|
||||
});
|
||||
await homePage.waitForPageLoad();
|
||||
expect(errors.length).toBe(0);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user