超越Selenium：自动化测试框架Cypress在现代前端测试中的卓越实践（windows版本）三

今天来继续了解框架

整体的框架为：

bash 复制代码

cypress/
├── e2e/                    # 测试用例（按功能分文件）
│   ├── auth/              # 查询相关
│   ├── .../              # 其他功能相关
├── pages/                 # 页面对象
│   ├── common/           # 公共组件
│   └── features/         # 功能页面
├── utils/                # 工具函数
└── fixtures/             # 测试数据
└── support/
│   ├── commands.js  # 自定义命令
│   └── e2e.js       # 支持文件
├── cypress.config.js    # 配置文件
└── package.json

1、先设置好基础的配置

javascript 复制代码

// cypress.config.js
const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {

    // baseUrl: 'https://www.baidu.com',
    viewportWidth: 1280,
    viewportHeight: 720,
    specPattern: 'cypress/e2e/**/*.cy.js',
    supportFile: 'cypress/support/e2e.js',
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
  // 启用视频录制功能
  video: true,
    // 视频录制相关配置
  videoUploadOnPasses: false, // 即使测试通过也保存视频
  // 视频文件保存路径
  videosFolder: "cypress/videos",
  // 截图文件保存路径
  screenshotsFolder: "cypress/screenshots",
});

2、页面对象
2.1 基础页面类

javascript 复制代码

// cypress/pages/common/BasePage.js
// 定义用到的基本类
class BasePage {
  visit(path = '') {
    cy.visit(`${this.url}${path}`)
    return this
  }
  get(selector) {
    return cy.get(selector)
  }
  shouldBeVisible(selector) {
    return this.get(selector).should('be.visible')
  }
  type(selector, text) {
    return this.get(selector).clear().type(text)
  }

  click(selector) {
    return this.get(selector).click()
  }
}
export default BasePage

2.2 功能页面实现

javascript 复制代码

import BasePage from '../common/BasePage.js'
class BaiduHomePage extends BasePage {

  constructor() {
    super()
    this.url = 'https://www.baidu.com'  
    this.selectors = {
      textarea: '#chat-textarea',  // 百度搜索框的实际ID
      submitButton: '#chat-submit-button',  // 百度搜索按钮的实际ID
      titleName: '.t ec_title j91khyx mvaztk7'  // 搜索结果区域
    }
  }

  // 页面加载验证
  isLoaded() {
    this.shouldBeVisible(this.selectors.textarea)
    this.shouldBeVisible(this.selectors.submitButton)
    return this
  }

  // 查询操作
  search(textarea) {
    this.type(this.selectors.textarea, textarea)
    this.click(this.selectors.submitButton)
    return this
  }

  // 验证信息
  shouldShowMessage(text) {
    return this.get(this.selectors.titleName)
      .should('be.visible')
      .and('contain.text', text)
  }
}
export default BaiduHomePage

3、测试用例

javascript 复制代码

// cypress/e2e/01打开百度进行查询.cy.js

import BaiduHomePage from '../pages/features/baiduhome.js'

describe('打开百度进行查询', () => {
  const baiduPage = new BaiduHomePage()

  beforeEach(() => {
    // 每次测试前访问登录页面
    baiduPage.visit().isLoaded()
  })

  it('查询cypress自动化测试框架成功', () => {
    // 使用测试数据
    cy.fixture('searchs').then((searchs) => {
      const search_text = searchs.search
      
      // 执行查询
      baiduPage.search(search_text.text)
      
      // 验证结果
      baiduPage.shouldShowMessage('cypress自动化测试框架')
    })
  }),
  it('查询app测试框架成功', () => {
    // 使用测试数据
    cy.fixture('searchs').then((searchs) => {
      const search_text = searchs.search
      // 执行查询
      baiduPage.search(search_text.text2)
      // 验证结果
      baiduPage.shouldShowMessage('app测试框架')
    })
  })
})

4、测试数据

javascript 复制代码

// cypress/fixtures/searchs.json
{
  "search": {
    "text": "cypress自动化测试框架",
    "text2": "app测试框架"
  }
}

5、报告配置

javascript 复制代码

import './commands'

// 测试失败时自动截图
Cypress.on('test:after:run', (test, runnable) => {
  if (test.state === 'failed') {
    const screenshotName = `${runnable.parent.title} -- ${test.title} (failed)`
    cy.screenshot(screenshotName, { overwrite: true })
  }
})

// 记录测试开始
Cypress.on('test:before:run', () => {
  console.log(`Test started at: ${new Date().toLocaleString()}`)
})

6、运行脚本

以上设置完成后，直接运行，在的vs的中输入命令

bash 复制代码

PS C:\Users\L\CypressPro\Demo1> npx cypress run

我本地运行的结果是失败的，因为运行太多次，百度浏览器识别到了非正常的打开因此出现了验证，但是不影响整个框架的使用。

运行完成后，会有录制的视频和截图