将wdio改造成monorepo项目

项目初始化 (framework 选择 cucumber, typescript作为compiler, 其他配置默认)

npm init wdio .

# ? Which framework do you want to use? Cucumber (https://cucumber.io/)
# ? Do you want to use a compiler? TypeScript (https://www.typescriptlang.org/)

将config,pageobjects,step拆封到三个独立包

Untitled 1.png

2.1 新建项目

mkdir my-mono && cd wdio

# 讲上面初始化项目中package.json 直接拷贝进目录中， 然后修改其中的参数

2.2 修改package.json参数

name是organization Id, 如果package要上传需要保持唯一
workspaces分包的根目录

{
	"name": "@my-mono"
}

2.3 子package生成

2.3.1 生成libs/config

npm init -w libs/config -y

# 执行完成后，根目录下的package.json 多出下述字段

Untitled 2.png

修改name, 添加script

{
-  "name": "config",
+  "name": "@my-mono/config",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {},
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+		 "build": "tsc",
+    "wdio": "wdio run ./dist/wdio.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

从旧项目中copy一份tsconfig.json 放入libs/config

{
  "compilerOptions": {
    "declaration": true,
-   "module": "ESNext",
+   "module": "commonjs", // 必要
    "moduleResolution": "node",
+   "outDir": "dist",
+   "removeComments": true,
+   "rootDir": "src", 
+   "skipLibCheck": true,
    "target": "ESNext",
    "types": [
      "node",
      "@wdio/globals/types",
      "expect-webdriverio",
      "@wdio/cucumber-framework"
    ]
-  }
+  },
+ "include": [
+   "src"
+ ]
}

在@my-mono/config的根目录下新建src目录，然后将原始demo中的wdio.config.ts复制到其中,

其中内部的这两个字段值需要修改，我这里目前想采用的方案是将需要的内容打入到node_modules里，这里完成了一半,specs 还是处于TODO的状态
```
{
	specs: ["../../../test/content/features/*.feature"],
	cucumberOpts: {
    require: ["../../node_modules/@my-mono/content/dist/index.js"],
	}
}
```

2.3.2 生成libs/pages

npm init -w libs/pages -y

修改name，添加main， modules， types

{
- "name": "pages",
+ "name": "@my-mono/pages",
  "version": "1.0.0",
+ "main": "./dist/index.js",
+ "module": "./dist/index.mjs",
+ "types": "./dist/index.d.ts",
+ "scripts": {
+  "build": "tsup"
+ },
+ "peerDependencies": {
+   "typescript": "^5.0.3"
+ },
  "author": "",
  "license": "ISC"
}

tsconfig 直接复制原始demo的即可

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "ESNext",
    "types": [
      "node",
      "@wdio/globals/types",
      "expect-webdriverio",
      "@wdio/cucumber-framework"
    ],
    "target": "es2022"
  },
  "include": ["src"]
}

编译使用tsup, 在@my-mono/pages根目录下新建tsup.config.ts

import { defineConfig } from "tsup";

export default defineConfig({
  entry: ["src/index.ts"],
  dts: true,
  splitting: false,
  clean: true,
  format: ["esm", "cjs"],
});

从原始demo复制pageobjects下的文件到@my-mono/pages根目录下src/page-objects Untitled 3.png

// ./src/page-objects
export { default as LoginPage } from "./login.page";
export { default as SecurePage } from "./secure.page";

// src/index.ts
export * from "./page-objects";

2.3.3 生成test/content

npm init -w test/content-y

package.json

{
  "name": "@my-mono/content",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tsc"
  },
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@my-mono/pages": "^1.0.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "declaration": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "removeComments": true,
    "rootDir": "src",
    "skipLibCheck": true,
    "target": "ESNext",
    "types": [
      "node",
      "@wdio/globals/types",
      "expect-webdriverio",
      "@wdio/cucumber-framework"
    ]
  },
  "include": ["src"]
}

将step-definitions/steps.ts 复制到 src/index.ts，login.feature复制到features/login.feature, 这时候step里面文件的import方式即可修改
```
import { LoginPage, SecurePage } from "@my-mono/pages";
```

2.4 接入turbo

npm i -W -D turbo

生成turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "remoteCache": {
    "signature": false
  },
  "pipeline": {
    "build": {
      "outputs": ["dist/**"],
      "cache": true
    },
    "wdio": {
      "dependsOn": ["^build"],
      "cache": true
    }
  }
}

配置package.json
```
{
	"wdio": "turbo run wdio",
	"build": "turbo run build"
}
```
TODO:
1. 使用typescript配置文件的统一管理
2. 使用vite替换tsc和tsup
3. wdio那边实现方式有待改善

将wdio改造成monorepo项目(个人记录向)