How to save the entire HTML source of a page being tested with Cypress

在使用 Cypress 进行自动化测试时，有时需要获取并保存当前访问页面的 HTML 源码。这可以通过 Cypress 的 API 结合 Node.js 的文件系统（fs 模块）来实现。以下是实现这个功能的一个步骤说明和代码示例：

1. 首先，确保你已经在 Cypress 项目中安装了 Node.js 和相关的 fs 模块。这通常不需要额外的安装，因为 Node.js 是 Cypress 的运行环境。

2. 在你的 Cypress 测试代码中，使用 cy.document() 命令来获取当前页面的 document 对象。

3. 然后，使用 .invoke('prop', 'outerHTML') 来获取页面的 HTML 源码。

4. 使用 Cypress 的 cy.writeFile() 命令将获取到的 HTML 内容写入到一个文件中。cy.writeFile() 命令底层使用了 Node.js 的 fs 模块来操作文件系统。

下面是一个写入当前页面 HTML 源码到文件的 Cypress 测试代码示例：

javascript
describe('保存页面 HTML 源码', () => {
  it('获取并保存当前页面的 HTML', () => {
    // 访问页面
    cy.visit('http://example.com');

    // 获取页面的 document 对象，然后获取其 HTML 源码
    cy.document().invoke('documentElement.outerHTML').then((html) => {
      // 定义要保存的文件路径和文件名
      const filePath = 'path/to/save/html-source.html';
      
      // 使用 cy.writeFile() 写入文件
      cy.writeFile(filePath, html);
    });
  });
});

此代码段首先通过 cy.visit() 访问一个 URL。然后它使用 cy.document() 获取当前页面的 document 对象，并通过 invoke('documentElement.outerHTML') 获取整个页面的 HTML 源码。最后，cy.writeFile() 用来将 HTML 源码写入到指定的文件中。

请注意，在实际编写测试脚本时，应正确设置文件路径，并确保你的 Cypress 测试运行环境有权限写入文件到该路径。此外，由于写文件是一个异步操作，Cypress 会自动处理好与异步操作相关的细节，使得测试脚本的编写变得简单。