通过E2E测试进行战斗测试NX控制台

#javascript #vscode #nx #monorepo

nx控制台是NX＆Lerna的UI。它可以作为VSCODE扩展名（以及更快即将来临！）可用，并且您将获得强大的功能：

NX配置文件的自动完成
在基于表单的视图中对发电机（和原理图）的探索，
您的IDE
以及整个扩展过程中的更多DX改进！

NX控制台项目始于多年前，并进行了各种迭代。从一个小的独立客户端的角度示意图到今天的现状：一种完全集成的工具，可以帮助您在使用NX时提高生产力。

和人们喜欢的人：我们今年通过了100万个安装！ ð

nx

@nxdevtools

ð¥nx控制台，我们的@code集成仅达到100万个安装！ ðð

marketplace.visualstudio.com/items?itemName…

16:00 pm- 2022年4月25日

当然，我们作为维护者，需要确保当我们制作PR或发布新版本时，我们的所有功能都起作用。

这是指手动单击不同示例工作空间中的功能 - 您可以想象，这很快变得乏味又不可靠。请记住，NX控制台不仅适用于NX，还适用于Lerna和Angular Workspaces多个版本！

我们需要一个解决方案来自动化此问题。

测试VSCODE扩展的问题

有许多不同类型的测试和不同的方法来结构和编写它们。让我们浏览四种常见的测试类型，看看如何在VSCODE扩展的上下文中使用它们。

静态测试，像类型检查和绒毛一样。 Vscode扩展名是用Typescript编写的，NX自动为我们设置ESLINT，因此我们免费获得这些静态检查。
单元测试将您的代码分解为单位，并孤立地测试这些单元（在大多数情况下，恰恰构成一个单位的解释）。他们在这里更加复杂。由于许多功能与VSCODE API相关，因此单位测试通常最终嘲笑所有导致实际测试功能的所有功能。因此，单位测试对于壁ni和助手和实用程序功能最有用，而不是广泛的覆盖范围。它们仍然可以很有用，我们在整个仓库中都有开玩笑编写的单位测试（但是您可以使用任何JS测试跑者来编写和运行单元测试）。
集成测试将软件的多个部分结合在一起，并将它们测试在一起。它们是测试扩展行为的好选择。如果您的read the docs，他们建议使用koude0包和koude1。这将允许您在实际的VSCODE实例中运行测试，因此您避免了模拟。但是，您仍然受到限制。 API提供了许多领域的信息。例如，即使是VSCODE API也无法实现这个非常简单的测试：
```
suite("Sample Extension", () => {
  vscode.commands.executeCommand("testing-ext.helloWorld");

  test("should display 'Hello World' notification", () => {
    // ??? - VSCode API does not expose this information
  });
});
```
端到端（E2E）测试是单击应用程序以确保其工作的机器人。他们可以测试实际用户可以做到的各种行为。当然，这是一个价格：运行它们的开销可能很高，因为您需要为每个测试旋转新鲜的VSCODE实例。但这是一个值得采取的权衡：您不会在测试内容和测试模仿实际用户流中受到限制。最好的部分：由于VSCODE是基于电子构建的，因此您可以像使用任何Web应用程序一样阅读，操纵和断言，并继续使用我们为此拥有的完善的JS工具。这是WebDriverio发挥作用的地方。

WebDriverio和WDIO-VSCODE-SERVICE

WebdriverIO (abbreviated as WDIO)是Node.js的E2E测试框架。它允许您使用WebDriver或Chrome DevTools协议自动化各种Web和移动应用程序。

理论上 - 由于VSCODE是基于电子构建的，并且只是引擎盖下方的JavaScript，HTML和CSS-您可以使用柏树或夜间观众进行测试。

为什么WebDriverio？

wdio具有一个很大的优势：koude3。它是一个与WDIO集成并为您处理所有与设置有关的工作的插件。您必须考虑下载，安装和运行VSCODE实例或匹配的Chromedriver。最重要的是，它为许多功能引导页面对象，并让您通过远程函数执行访问VSCODE API。

所有这些（以及更多）功能使您能够快速设置WDIO并继续进行写作测试！

配置WDIO并编写第一个测试

设置WDIO是一个简单的过程。通过遵循installation guide，您将获得一个预配置的wdio.conf.ts文件，并安装了所有必需的依赖项。在adding some types to koude5并在wdio.conf.ts中调整一些路径以匹配我们的文件夹结构之后，我们已经处于可以执行wdio run ./wdio.conf.ts的位置。您可以看到VSCODE已下载并为我们打开包装。但是，当然，没有任何测试，什么都没有发生。让我改变！

➜  vscode-e2e ✗ npx wdio run ./wdio.conf.ts

Execution of 0 workers started at 2022-10-27T21:39:54.555Z

Downloading VS Code 1.72.2 from https://update.code.visualstudio.com/1.72.2/darwin/stable
Downloading VS Code [==============================] 100%
Downloaded VS Code into /Users/maxkless/nx-console/apps/vscode-e2e/.wdio-vscode-service/vscode-darwin-1.72.2

2022-10-27T21:40:42.539Z ERROR @wdio/cli:launcher: No specs found to run, exiting with failure

Spec Files:      0 passed, 0 total (0% completed) in 00:00:47

编写测试并不非常复杂。在与您的配置的specs属性匹配的位置中创建文件，WDIO将自动拾取它。您可以将摩卡咖啡，黄瓜或茉莉花用作测试框架，然后开始编写describe，it和before块，就像您曾经一样。

import { Workbench } from 'wdio-vscode-service';

describe('NxConsole Example', () => {
  it('should be able to load VSCode', async () => {
    const workbench: Workbench = await browser.getWorkbench();

    expect(await workbench.getTitleBar().getTitle()).toBe(
      '[Extension Development Host] Visual Studio Code'
    );
  });
});

请参阅WebdriverIO docs，以了解有关其API以及如何编写测试的更多信息。

如果我们再次运行wdio run ./wdio.conf.ts，我们将看到WDIO正在使用缓存的VSCODE二进制文件并成功执行我们的测试！

vscode-e2e ✗ npx wdio run ./wdio.conf.ts

Execution of 1 workers started at 2022-11-10T12:10:40.029Z

Found existing install in /Users/maxkless/nx-console/apps/vscode-e2e/.wdio-vscode-service/vscode-darwin-1.72.2. Skipping download
[0-0] RUNNING in chrome - /specs/example.e2e.ts
[0-0] PASSED in chrome - /specs/example.e2e.ts

 "spec" Reporter:
------------------------------------------------------------------
[chrome 102.0.5005.167 mac os x #0-0] Running: chrome (v102.0.5005.167) on mac os x
[chrome 102.0.5005.167 mac os x #0-0] Session ID: da14f0f07ba2fe47728eaf8a249b5bca
[chrome 102.0.5005.167 mac os x #0-0]
[chrome 102.0.5005.167 mac os x #0-0] » /specs/example.e2e.ts
[chrome 102.0.5005.167 mac os x #0-0] NxConsole Example
[chrome 102.0.5005.167 mac os x #0-0]    ✓ should be able to load VSCode
[chrome 102.0.5005.167 mac os x #0-0]
[chrome 102.0.5005.167 mac os x #0-0] 1 passing (1.3s)

Spec Files:      1 passed, 1 total (100% completed) in 00:00:28

与NX集成 - 定义目标

当然，我们想利用NX的强大功能，例如the task graph，computation caching和distributed task execution。如果您重新使用integrated style Nx repo，则可以访问许多官方和社区插件，这些插件可以立即与流行的开发工具集成。开玩笑，Eslint，Cypress等人都有执行者（more on that here），使您可以通过NX运行它们。这是WebDriverio的情况，因此我们有两个选择：创建一个自定义插件和WDIO遗嘱执行程序，或者只需使用koude13与NX包裹任意命令。如果WDIO在我们的存储库中广泛使用，那么编写自定义插件就不会太多，绝对值得！但是对于此一次使用，我们选择了更快的选择。让我们设置一个像这样的e2e目标：

{
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/vscode-e2e/src",
  "projectType": "application",
  "targets": {
    "e2e": {
      "executor": "nx:run-commands",
      "options": {
        "command": "wdio run ./wdio.conf.ts",
        "cwd": "apps/vscode-e2e"
      },
      "dependsOn": ["^build"]
    }
  },
  "implicitDependencies": ["vscode", "nxls"],
}

现在，如果我们运行nx run vscode-e2e:e2e，我们将看到wdio在nx内运行！

➜  nx-console ✗ npx nx run vscode-e2e:e2e

✔    2/2 dependent project tasks succeeded [2 read from cache]

Hint: you can run the command with --verbose to see the full dependent project outputs

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

> nx run vscode-e2e:e2e

## Execution of 1 workers started at 2022-10-27T19:44:02.756Z
Found existing install in /Users/maxkless/nx-console/apps/vscode-e2e/.wdio-vscode-service/vscode-darwin-1.71.2. Skipping download
[0-0] RUNNING in chrome - /specs/example.e2e.ts
[0-0] PASSED in chrome - /specs/example.e2e.ts
"spec" Reporter:

[chrome 102.0.5005.167 mac os x #0-0] Running: chrome (v102.0.5005.167) on mac os x
[chrome 102.0.5005.167 mac os x #0-0] Session ID: 74edae2b6a5f68effc8bdec1e2114e5f
[chrome 102.0.5005.167 mac os x #0-0]
[chrome 102.0.5005.167 mac os x #0-0] » /specs/example.e2e.ts
[chrome 102.0.5005.167 mac os x #0-0] NxConsole Example
[chrome 102.0.5005.167 mac os x #0-0]    ✓ should be able to load VSCode
[chrome 102.0.5005.167 mac os x #0-0]
[chrome 102.0.5005.167 mac os x #0-0] 1 passing (6.8s)
Spec Files:      1 passed, 1 total (100% completed) in 00:00:29

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

> NX   Successfully ran target e2e for project vscode-e2e and 2 task(s) it depends on (40s)
> 

Nx read the output from the cache instead of running the command for 2 out of 3 tasks.

See Nx Cloud run details at [https://cloud.nx.app/runs/rprfQeMdy6](https://cloud.nx.app/runs/rprfQeMdy6)

虽然输出看起来没有太大不同，但这可以实现一些惊人的功能！如果我们再次进行测试，它们将以几毫秒的成绩完成，因为结果可能是retrieved from cache。另外，由于我们定义了dependsOn和implicitDependencies，因此NX将始终确保在运行E2E测试之前构建NX控制台和NXL的最新版本。所有这些都只有几行config！

设置CI

从自动化E2E测试中获取最大值的另一个重要步骤是在CI中运行它。将新检查添加到现有的GitHub操作管道中并不复杂，因此单行的YAML配置应该可以解决：

run: yarn exec nx affected --target=e2e --parallel=3

nx affected分析您的代码更改，以计算需要重新测试的最低项目集。在这里了解更多信息：How Affected Works

但是，这将失败，因为WebDriverio试图打开VSCODE并期望屏幕 - 哪些动作跑者显然没有。如果我们在简单的铬或Firefox实例上进行测试，则可以通过将--headless添加到浏览器的启动选项中来解决。 vScode不支持无头模式，因此我们必须找到另一个解决方案：xvfb。

koude21, short for X virtual frame buffer，是一款显示服务器，可让您通过创建虚拟显示 - 帧缓冲区来无头运行任何程序。要通过CI上的xvfb进行E2E测试，需要两个步骤：

首先，我们在我们的e2e目标中创建了一个新的配置，该脚本运行相同的脚本，但通过xvfb。

{
  ...
  "e2e": {
    ...
    "configurations": {
      "ci": {
        "command": "xvfb-run -a wdio run ./wdio.conf.ts"
      }
    },
  }
},
}

第二，我们必须确保将xvfb安装在我们的动作跑者上。从理论上讲，我们可以在所有跑步者上运行sudo apt-get install -y xvfb，并将其称为一天。但是，为了清楚起见，为了证明您可以使用NX Cloud做的一些高级事情，我们决定采用其他解决方案。我们想创建两种跑步者：一个安装了xvfb，另一种没有它。这可以通过在我们的代理和任务定义中使用NX_RUN_GROUP变量来完成。有了它，E2E测试是在第一类上运行的，其他任务是在任何跑步者上运行的。

首先，我们指定了每次运行尝试的NX_RUN_GROUP的唯一值，并将其设置为代理定义中的环境变量。然后，我们确保将xvfb安装在这些代理上。

agent:
    runs-on: ubuntu-latest
    name: Nx Cloud - Agent E2E
    timeout-minutes: 15
    steps:
      - name: Set nx run variable
        run: echo "NX_RUN_GROUP=run-group-e2e-${{ github.run_id}}-${{ github.run_attempt }}" >> $GITHUB_ENV
      - uses: actions/checkout@v2
      - uses: ./.github/workflows/setup
        with:
          node_version: ${{ env.node_version }}
      - name: Install xvfb
        run: sudo apt-get install -y xvfb
      - name: Start Nx Agent E2E
        run: npx nx-cloud start-agent
      - uses: actions/upload-artifact@v3
        with:
          name: e2e-screenshots
          path: apps/vscode-e2e/.screenshots
          if-no-files-found: ignore

在action.yml中，我们指定要运行的支票，我们为我们的E2E任务提供相同的NX_RUN_GROUP环境变量。

name: E2E
env:
    NX_RUN_GROUP: run-group-e2e-${{ github.run_id}}-${{ github.run_attempt }}
run: yarn exec nx affected --target=e2e --parallel=3 --configuration=ci

然后，

nx云与这些运行组匹配，并确保所有E2E任务仅在安装xvfb的代理上执行。有了它，我们现在可以使用真实的屏幕来完成我们可以在本地完成的一切。例如，我们在失败时进行屏幕截图，并通过actions/upload-artifact从Github下载它们。