如何在Cypress项目中上传HTML文件并运行以执行自动化测试

1. 存放HTML文件 #

把你的HTML文件放到Cypress项目的cypress/fixtures目录下（这是Cypress默认的静态资源存储目录，访问起来最方便），比如命名为demo-page.html。要是想自定义目录，比如新建cypress/html-pages，也没问题，后续访问时对应修改路径就行。

2. 加载打开HTML文件 #

有两种实用的方法：

方法一：直接通过本地文件协议访问 #

用cy.visit()加载本地文件，需要拼接file://协议和文件的绝对路径。借助Cypress的config能拿到项目根目录，轻松拼出路径：

cy.visit(`file://${Cypress.config('projectRoot')}/cypress/fixtures/demo-page.html`)

如果用的是自定义目录cypress/html-pages，路径改成：

cy.visit(`file://${Cypress.config('projectRoot')}/cypress/html-pages/demo-page.html`)

方法二：读取HTML内容注入页面 #

先读取HTML文件的内容，再把内容写入当前页面的文档中：

cy.fixture('demo-page.html').then((htmlContent) => {
  cy.document().then((doc) => {
    doc.write(htmlContent)
    doc.close() // 确保文档完全加载
  })
})

这种方式不用依赖file://协议，适合某些环境下本地文件访问受限的情况。

3. 执行自动化操作 #

HTML加载完成后，就可以用常规的Cypress命令做自动化操作了，比如：

// 点击页面按钮
cy.get('#confirm-btn').click()
// 往输入框填内容
cy.get('#email').type('test@example.com')
// 验证页面文本
cy.get('.status').should('have.text', '已提交')

内容的提问来源于stack exchange，提问作者Sudhi