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

Question

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

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

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

Answer 1

以下是我在没有任何赛普拉斯库的情况下设法做到这一点的方法：

在测试文件的 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 应用程序的文件夹中。此外，在测试时，不应重新加载网页，因为这会重置覆盖率计数器，从而导致覆盖率不正确。

但是，这还不够。 istanbul 的代码中有一个错误，所以我使用了一个修复程序，发现 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)

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

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

Vue Cypress code coverage report with python tests

python

testing

istanbul

vue.js

cypress