带有 python 测试的 Vue Cypress 代码覆盖率报告

Posted 2023-02-19

【中文标题】带有 python 测试的 Vue Cypress 代码覆盖率报告

【英文标题】：Vue Cypress code coverage report with python tests

【发布时间】：2021-07-23 16:10:34

【问题描述】：

我使用 Selenium 进行 Python 测试来测试我的 Vue 网页。我想获得这些测试的代码覆盖率结果。我已经安装了 babel-plugin-istanbul 来检测应用程序，它可以工作。我有window.__coverage__ 对象，其中包含覆盖信息。

我的问题是，如果我使用 Python 而不是赛普拉斯的测试框架运行测试，我如何获得覆盖率报告。我已经安装了 cypress/code-coverage，但是如果不使用 Cypress 的单元测试框架，我不知道如何生成报告。

另外，如果有其他的 Vue 覆盖率报告框架，更适合我的用例，我愿意提出建议。

【参考方案1】：

这是我在没有任何 Cypress 库的情况下如何做到的：

在测试文件的tearDownClass 方法中（在所有测试之后），我添加了这段代码，将window.__coverage__ 保存到.nyc_output/out.json 文件中：

@classmethod
def tearDownClass(cls):
    # Put coverage data into file.
    data = cls.driver.execute_script('return window.__coverage__')
    
    with open(os.path.join(cls.webAppPath, ".nyc_output", "out.json"), 'w') as outfile:
        json.dump(data, outfile)

    # Generate html coverage report
    os.system("cd %s && %s report --reporter=html -e .vue" % (cls.webAppPath, os.path.join(cls.webAppPath, "node_modules", ".bin", "nyc")))

请注意，.nyc_output 文件夹必须位于 Web 应用程序的文件夹中。此外，在测试期间，不应重新加载网页，因为这会重置覆盖计数器，从而提供不正确的覆盖。

但是，这还不够。伊斯坦布尔的代码中有一个错误，所以我使用了一个修复程序，找到了here。在测试之前，我用这种方式修改了istanbul的一部分代码（然后重新编译了web app的代码）：

# Fix a bug in istanbul code coverage lib
pathOfFileToModify = os.path.join(webAppPath, "node_modules/istanbul-lib-source-maps/lib/pathutils.js")

with open(pathOfFileToModify, "r") as fileToModify:
    modified = fileToModify.read().replace('relativeTo(file, origFile) \n        return', 'relativeTo(file, origFile) \n        if (origFile.indexOf(file) !== -1)  return origFile \n        return')

with open(pathOfFileToModify, "w") as fileToModify: # TODO Maybe figure out how to use read-write mode?
    fileToModify.write(modified)

如果有人找到更好的解决方法，请在 cmets 中告诉我。

【讨论】：

处理窗口加载/重新加载赛普拉斯代码覆盖挂钩到windowLoad 事件。这可以在测试运行期间提供多个__coverage__ 对象，这些对象被保存到一个数组中，并在运行结束时使用伊斯坦布尔coverageMap 对象与coverageMap.merge(__coverage__) 组合，然后转储到out.json。我不确定您需要哪个 Selenium 事件（可能是 beforeNavigateTo），但很容易找到。