diff --git a/README.md b/README.md index d0a0a1e67..cdad9bc3a 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,6 @@ In addition, it is always up-to-date with the latest Chrome DevTools features. - โš™ [Run it in your CI ](https://github.com/push-based/user-flow#github-workflow-integration-of-lighthouse-user-flows-in-your-pr) - โ–ถ [Execute ChromeDevTools recorder exports](https://github.com/push-based/user-flow#working-with-devtools-recorder-exports) - ๐Ÿƒโ€โ™€๏ธ Measure Runtime performance -- ๐Ÿ”’ [Performance budgets](https://github.com/push-based/user-flow#performance-budgets) - ๐Ÿฆฎ Zero setup cost - ๐Ÿค“ Excellent DX through `--dryRun` and friends - โš™ Nx plugin [user-flow-nx-plugin]() to generate/execute/migrate lighthouse user flows @@ -103,11 +102,11 @@ _./.user-flowrc.json_ } ``` -2. The CLI automatically creates an example user-flow. (`./user-flows/basic-navigation.uf.ts`) +2. The CLI automatically creates an example user-flow. (`./user-flows/basic-navigation.uf.mts`) It is a simple navigation measurement to start from. -_./basic-navigation.uf.ts_ +_./basic-navigation.uf.mts_ ```typescript import { UserFlowInteractionsFn, @@ -122,17 +121,15 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi // Navigate to URL await flow.navigate(url, { - stepName: `Navigate to ${url}`, + name: `Navigate to ${url}`, }); }; -const userFlowProvider: UserFlowProvider = { - flowOptions: {name: 'Order Coffee'}, - interactions -}; - -module.exports = userFlowProvider; +export default { + flowOptions: { name: "Order Coffee" }, + interactions, +} satisfies UserFlowProvider; ``` 3. Run CLI @@ -147,7 +144,7 @@ This will execute the user flow and opens the HTML report in the browser: For more information on how to write user-flows read in the [Writing user flows for the CLI](https://github.com/push-based/user-flow/blob/main/packages/cli/docs/writing-basic-user-flows.md) section. -Optionally you can pass params to overwrite the values form `.user-flowrc.ts` in the file directly or over the CLI: +Optionally you can pass params to overwrite the values form `.user-flowrc.json` in the file directly or over the CLI: ```bash npx user-flow --ufPath=./user-flows-new --outPath=./user-flows-reports --url=https://localhost:4200 @@ -192,8 +189,6 @@ This command helps you to set up a `.user-flowrc.json` and asks for input over C | ---------------------------------- | --------- | ---------------------- |----------------------------------------------------------------------------------------------------------| | **`-h`**, **`--generateFlow`** | `boolean` | n/a | Generate basic user-flow file under `ufPath` | | **`-g`**, **`--generateGhWorkflow`** | `boolean` | n/a | Generate `user-flow.yml` file under `.github/workflows` | -| **`-x`**, **`--generateBudgets`** | `boolean` | n/a | Generate `budget.json` file under the current working directury | -| **`--lhr`** | `string` | n/a | Used together with `--generateBudgets`. Path to lighthouse report for initial budget | getting-started-resulting-navigation-report @@ -214,9 +209,8 @@ This command executes a set of user-flow definitions against the target URL and | Option | Type | Default | Description | |------------------------------------|-----------|------------------------|---------------------------------------------------------------------------------------------------------| | **`-t`**, **`--url`** | `string` | n/a | URL to analyze | -| **`-u`**, **`--ufPath`** | `string` | `./user-flows` | Path to user-flow file or folder containing user-flow files to run. (`*.uf.ts` or`*.uf.js`) | +| **`-u`**, **`--ufPath`** | `string` | `./user-flows` | Path to user-flow file or folder containing user-flow files to run. (`*.uf.mts` or`*.uf.js`) | | **`-c`**, **`--configPath`** | `string` | n/a | Path to the lighthouse `config.json` file | -| **`-b`**, **`--budgetPath`** | `string` | n/a | Path to the lighthouse `budget.json` file | | **`-s`**, **`--serveCommand`** | `string` | n/a | Runs a npm script to serve the target app. This has to be used in combination with `--awaitServeStdout` | | **`-a`**, **`--awaitServeStdout`** | `string` | `.user-flowrc` setting | Waits for stdout from the serve command to start collecting user-flows | | **`-f`**, **`--format`** | `string` | `html`, `json` setting | Format of the creates reports ( `html`, `json`, `md`, `stdout`) | @@ -279,20 +273,6 @@ This library provides a way to replay and enrich those interactions over the CLI See [recorder-exports](https://github.com/push-based/user-flow/blob/main/packages/cli/docs/recorder-exports.md) for more details. -## [Performance Budgets](https://github.com/push-based/user-flow/blob/main/packages/cli/docs/performance-budgets.md) - -Implementing performance improvements without breaking something is hard. -**Even harder is it, to keep it that way. ๐Ÿ”’** - -![img-budgets-mode-support](https://user-images.githubusercontent.com/10064416/164581870-3534f8b0-b7c1-4252-9f44-f07febaa7359.PNG) - -Automatically create budgets with: -`npx user-flow init --generateBudgets` -Automatically create budgets from an existing lhr with: -`npx user-flow init --generateBudgets --lhr path/to/lhr.json` - -See [performance-budgets](https://github.com/push-based/user-flow/blob/main/packages/cli/docs/performance-budgets.md) for more details. - ## [GitHub workflow integration of lighthouse user flows in your PR](https://github.com/push-based/user-flow/blob/main/packages/cli/docs/github-workflow-integration.md) With just a few steps you can run your user flows in as a GitHub workflow to enrich your PR's with report summaries as diff --git a/examples/github-report/user-flows/order-coffee.uf.mts b/examples/github-report/user-flows/order-coffee.uf.mts index 13db38621..f4c6f4731 100644 --- a/examples/github-report/user-flows/order-coffee.uf.mts +++ b/examples/github-report/user-flows/order-coffee.uf.mts @@ -59,9 +59,7 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi }); }; -const userFlowProvider: UserFlowProvider = { - flowOptions: {name: 'โ˜• Order Coffee โ˜•'}, - interactions -}; - -module.exports = userFlowProvider; +export default { + flowOptions: { name: 'โ˜• Order Coffee โ˜•' }, + interactions, +} satisfies UserFlowProvider; diff --git a/package.json b/package.json index 1fa2237a3..b4d287938 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "nx": "nx", "build-cli": "nx build cli", "import-graph": "npx @rx-angular/import-graph-visualizer -t packages/cli/tsconfig.lib.json", - "lh": "lighthouse https://example.com --budget-path=./budget.json --output=json --output-path=./lh-inc-budget.json", "@push-based/user-flow": "npm run build-cli && npx ./dist/packages/cli", "@push-based/user-flow:help": "npm run @push-based/user-flow -- --help", "@push-based/user-flow:init": "npm run @push-based/user-flow -- init -v", diff --git a/packages/cli/docs/command-collect.md b/packages/cli/docs/command-collect.md index 0553a8987..28a6aa070 100644 --- a/packages/cli/docs/command-collect.md +++ b/packages/cli/docs/command-collect.md @@ -26,8 +26,7 @@ The result can be stored in different formats or printed in the console. | Option | Type | Default | Description | | ---------------------------------- | --------- | ---------------------- |----------------------------------------------------------------------------------------------------------| | **`-t`**, **`--url`** | `string` | n/a | Value for `collect.url` in your | -| **`-u`**, **`--ufPath`** | `string` | `./user-flows` | Path to user-flow file or folder containg user-flow files to run. (`*.uf.ts` or`*.uf.js`) | -| **`-b`**, **`--budget-path`** | `string` | n/a | Path to the lighthouse `budget.json` file | +| **`-u`**, **`--ufPath`** | `string` | `./user-flows` | Path to user-flow file or folder containg user-flow files to run. (`*.uf.mts` or`*.uf.js`) | | **`-c`**, **`--config-path`** | `string` | n/a | Path to the lighthouse `config.json` file | | **`-f`**, **`--format`** | `string` | `html`, `json` setting | Format of the creates reports | | **`-o`**, **`--outPath`** | `string` | `./measures` | output folder for the user-flow reports | @@ -100,7 +99,7 @@ npx user-flow collect --ufPath ./user-flows/spectial-folder # reference a flow directly -npx user-flow collect --ufPath ./user-flows/spectial-flow.uf.ts +npx user-flow collect --ufPath ./user-flows/spectial-flow.uf.mts ``` **Description:** @@ -110,7 +109,7 @@ The path to user-flow file or folder containing user-flows. You can point to a folder to execute all user flows in there, or execute one file directly. File formats accepted: -- `*.uf.ts` +- `*.uf.mts` - `*.js` ### format @@ -157,25 +156,6 @@ npx user-flow collect --outPath ./measures The path to store user-flow reports. The CLI will automatically create the folder if it does not exist. -### budgetPath - -| Option | Type | Default | -| ---------------------------------- | --------- | ---------------------- | -| **`-b`**, **`--budgetPath`** | `string` | n/a | - -**Execution:** -``` -npx user-flow collect --budgetPath ./budgets.json -``` - -**Description:** - -When used it will parse the given file and uses its content as configuration for budgets in the [LH config](link to docs). - -Details on usage and configuration are available in the [lighthouse budgets](https://github.com/push-based/user-flow/blob/main/packages/cli/docs/performance-budgets.md) section. - -The `budgets.json` file path can also be placed directly into the rc file under `assert.budgetPath`. - ### configPath | Option | Type | Default | @@ -190,7 +170,6 @@ npx user-flow collect --configPath ./lh-config.json **Description:** Path to the lighthouse configuration file. When used it will parse the given file and uses its content as configuration. -If `budgets` are given it will merge them into the existing LH config. Details on usage and configuration are available in the [lighthouse configuration](https://github.com/push-based/user-flow/blob/main/packages/cli/docs/lighthouse-configuration.md) section. diff --git a/packages/cli/docs/command-init.md b/packages/cli/docs/command-init.md index 5595a9549..75fd7ee2c 100644 --- a/packages/cli/docs/command-init.md +++ b/packages/cli/docs/command-init.md @@ -27,12 +27,11 @@ In addition, it helps to do scaffolding by create basic files and folders needed | Option | Type | Default | Description | | ---------------------------------- | --------- | ---------------------- |----------------------------------------------------------------------------------------------------------| | **`-t`**, **`--url`** | `string` | n/a | Value for `collect.url` in your | -| **`-u`**, **`--ufPath`** | `string` | `./user-flows` | Path to user-flow file or folder containg user-flow files to run. (`*.uf.ts` or`*.uf.js`) | +| **`-u`**, **`--ufPath`** | `string` | `./user-flows` | Path to user-flow file or folder containg user-flow files to run. (`*.uf.mts` or`*.uf.js`) | | **`-o`**, **`--outPath`** | `string` | `./measures` | output folder for the user-flow reports | | **`-s`**, **`--serveCommand`** | `string` | n/a | Runs a npm script to serve the target app. This has to be used in combination with `--awaitServeStdout` | | **`-a`**, **`--awaitServeStdout`** | `string` | `.user-flowrc` setting | Waits for stdout from the serve command to start collecting user-flows | | **`-f`**, **`--format`** | `string` | `html`, `json` setting | Format of the creates reports | -| **`-b`**, **`--budget-path`** | `string` | n/a | Path to the lighthouse `budget.json` file | | **`-c`**, **`--config-path`** | `string` | n/a | Path to the lighthouse `config.json` file | **Options file scaffolding:** @@ -41,9 +40,6 @@ In addition, it helps to do scaffolding by create basic files and folders needed | ------------------------------------ | --------- | ---------------------- |----------------------------------------------------------------------------------------------------------| | **`-h`**, **`--generateFlow`** | `boolean` | n/a | Generate basic user-flow file under `ufPath` | | **`-g`**, **`--generateGhWorkflow`** | `boolean` | n/a | Generate `user-flow.yml` file under `.github/workflows` | -| **`-x`**, **`--generateBudgets`** | `boolean` | n/a | Generate `budget.json` file under the current working directury | -| **`--lhr`** | `string` | n/a | Used together with `--generateBudgets`. Path to lighthouse report for initial budget | - ## Options related to the `user-flowrc.json` file @@ -99,10 +95,10 @@ npx user-flow init --no-generateFlow **Description:** -If the `init` command is executed with `--generateFlow` it will generate a file named `basic-navigation.uf.ts`. +If the `init` command is executed with `--generateFlow` it will generate a file named `basic-navigation.uf.mts`. It contains a basic user flow and will be placed in the folder configured in you `.user-flowrc.json` file for `collect.ufPath`. -The `basic-navigation.uf.ts` template can be found [here](https://github.com/push-based/user-flow/blob/ba6a8d4fbf8060bea067e0fa3528611be5653ddf/packages/cli/src/lib/commands/init/static/basic-navigation.uf.ts#L2) +The `basic-navigation.uf.mts` template can be found [here](https://github.com/push-based/user-flow/blob/ba6a8d4fbf8060bea067e0fa3528611be5653ddf/packages/cli/src/lib/commands/init/static/basic-navigation.uf.mts#L2) If the `init` command executes with `--no-generateFlow` nothing will be created nor prompted in the console. @@ -126,40 +122,10 @@ npx user-flow init --no-generateGhWorkflow If the `init` command is executed with `--generateGhWorkflow` it will generate a file named `user-flow-ci.yml`. It contains a basic workflow to execute the CLI in GitHubs pipe line. -The `user-flow-ci.yml` template can be found [here](https://github.com/push-based/user-flow/blob/ba6a8d4fbf8060bea067e0fa3528611be5653ddf/packages/cli/src/lib/commands/init/static/basic-navigation.uf.ts#L2) +The `user-flow-ci.yml` template can be found [here](https://github.com/push-based/user-flow/blob/ba6a8d4fbf8060bea067e0fa3528611be5653ddf/packages/cli/src/lib/commands/init/static/basic-navigation.uf.mts#L2) If the `init` command executes with `--no-generateGhWorkflow` nothing will be created nor prompted in the console. -### generateBudgets & lhr - -| Option | Type | Default | -| ------------------------------------ | --------- | ---------------------- | -| **`-x`**, **`--generateBudgets`** | `boolean` | n/a | -| **`--lhr`** | `string` | n/a | - -**Execution:** -``` -npx user-flow init --generateBudgets - -# or as negation - -npx user-flow init --no-generateBudgets - -# or to derive budgets form an existing lighthouse report - -npx user-flow init --generateBudgets --lhr path/to/lhr.json -``` - -**Description:** - -If the `init` command is executed with `--generateBudgets` it will generate a file named `budgets.json`. -It contains basic lighthouse budgets to be used in the rc file or CLI. - -If the `init` command executes with `--no-generateBudgets` nothing will be created nor prompted in the console. - -Automatically derive budgets from a report: -If the `init` command executes with `--generateBudgets` and `--lhr=path/to/lhr.json` the budgets will be derived from the given lighthouse report. - --- made with โค by [push-based.io](https://www.push-based.io) diff --git a/packages/cli/docs/general-cli-features.md b/packages/cli/docs/general-cli-features.md index 7844523c0..37f7e75a8 100644 --- a/packages/cli/docs/general-cli-features.md +++ b/packages/cli/docs/general-cli-features.md @@ -88,7 +88,7 @@ A function that logs the passed string only if the CIL options `--verbose` or `- **Usage** -_./order-coffee.uf.ts_ +_./order-coffee.uf.mts_ ```typescript import { logVerbose } from "@push-based/user-flow"; // ... diff --git a/packages/cli/docs/github-workflow-integration.md b/packages/cli/docs/github-workflow-integration.md index 501fe14ae..227249f20 100644 --- a/packages/cli/docs/github-workflow-integration.md +++ b/packages/cli/docs/github-workflow-integration.md @@ -15,7 +15,7 @@ In this document we will learn: ## Setup user flow for the CI As pre-condition we assume you have a correct setup of the CLI as descried in [basic setup](writing-basic-user-flows.md). -This means you have a `user-flowrc.json` to point to as well as a `flow-name.ts` to execute. +This means you have a `user-flowrc.json` to point to as well as a `flow-name.mts` to execute. To test if you flow is working quickly run the CLI in 'dry run' and print it to the console to see the test passes: `user-flow collect --dryRun --format stdout` optionally use `--rcPath /path/to/user-flowrc.json` if the rc file is not located in root. diff --git a/packages/cli/docs/lh-configuraton.md b/packages/cli/docs/lh-configuraton.md index b5c0200cf..e110ed7ac 100644 --- a/packages/cli/docs/lh-configuraton.md +++ b/packages/cli/docs/lh-configuraton.md @@ -17,7 +17,7 @@ The CLI provides multiple ways of configuration, every one with a different gran Places to put configurations: - in a `.user-flowrc.json` - used for all flows (**global**) - in the console as CLI param - used for all flows, overwrites rc file (**global**) -- in a `.uf.ts` - used for 1 specific flow (**local**) +- in a `.uf.mts` - used for 1 specific flow (**local**) Local configurations will overwrite global configurations. @@ -28,18 +28,12 @@ It is also possible to provide the configurations directly as `JSON` object in t The `configPath` property is handy when all parameters should exist as CLI params only. -### Configration option short-hands +### Configuration option short-hands -As the configuration object can get quite big lighthouse provides a couple of shourt-hands to directly configure specific parts over a flag. -The user-flow CLI ports perts of this behavior. - -It provides the following short hands: - - budgets - performance budgets for lighthouse performance budgets for the navigation mode +As the configuration object can get quite big lighthouse provides a couple of short-hands to directly configure specific parts over a flag. +The user-flow CLI ports perts of this behavior. Those options can be used similar to the general configurations globally as well as locally. -Also the placement of budgets is similar to the general configurations in the `.user-flowrc.json` or as CLI param. - -The `budgetPath` property is handy when all parameters should exist as CLI params only. ## Options @@ -50,9 +44,7 @@ Used in the rc.json file directly. | Option | Type | Default | Description | | ------------------------------- | --------- | ---------------------- |----------------------------------------------------------------------------------------------------------| | **`collect.configPath`** | `string` | n/a | Path to the lighthouse `config.json` file | -| **`collect.config`** | `object` | n/a | The lighthouse configuration as `JSON` object | -| **`collect.budgetPath`** | `string` | n/a | Path to the lighthouse `budget.json` file | -| **`collect.budget`** | `object` | n/a | The lighthouse budgets as `JSON` object | +| **`collect.config`** | `object` | n/a | The lighthouse configuration as `JSON` object | **CLI params** @@ -61,7 +53,6 @@ Used in the console as `user-flow collect `. | Option | Type | Default | Description | | ------------------------------- | --------- | ---------------------- |----------------------------------------------------------------------------------------------------------| | **`-c`**, **`--configPath`** | `string` | n/a | Path to the lighthouse `config.json` file | -| **`-b`**, **`--budgetPath`** | `string` | n/a | Path to the lighthouse `budget.json` file | ### Configuration over RC properties @@ -171,9 +162,6 @@ You can directly use a lighthouse config object in the rc file by placing it und See [CLI collect command - configPath](https://github.com/push-based/user-flow/blob/main/packages/cli/docs/command-collect.md#configpath) -### budgetPath - -See [CLI collect command - budgetPath](https://github.com/push-based/user-flow/blob/main/packages/cli/docs/command-collect.md#budgetpath) --- made with โค by [push-based.io](https://www.push-based.io) diff --git a/packages/cli/docs/performance-budgets.md b/packages/cli/docs/performance-budgets.md deleted file mode 100644 index ee2c2bbdf..000000000 --- a/packages/cli/docs/performance-budgets.md +++ /dev/null @@ -1,157 +0,0 @@ -# How to use performance budgets with lighthouse user flow? - -Implementing performance improvements without breaking something is hard. -Even harder is it to keep it that way. - -## Availability - -At the moment budgets are only supported for "Navigation". "Timespan" and "Snapshot" measures are not supported by user flows directly. - -| HTML | MARKDOWN | -| :--: | :------: | -| ![img-budgets-mode-support-html](https://user-images.githubusercontent.com/10064416/219039874-0f10d7fe-620a-4d61-9b4d-f7fb2f0252d0.png) | ![md-budget](https://user-images.githubusercontent.com/10064416/219039911-f42c72f2-8e11-402a-a402-199099cd1bd2.png) | - -**Budget Structure** -The CLI follows exactly the same budget structure as lighthouse. - -The [`Budget` types](https://github.com/GoogleChrome/lighthouse/blob/89a61379e6bd0a55b94643b3ce583c00203c0fbc/types/lhr/budget.d.ts) can be used from the node package. -However, if you use JSON, there is also provide a [`lighthouse-budgets.schema.json`](../src/lighthouse-budgets.schema.json) provided. - -_Schema JSON validation in IDE_ -![budgets-json-validation](https://user-images.githubusercontent.com/10064416/164541563-57379716-ec88-423b-9e5d-bd10d0c4a78d.PNG) - -## Setup budgets in RC file - -Run `npx user-flow init --generateBudgets` to generate a budgets file automatically. - -To set it up manually follow the folllowing steps: - -1. Create a `budget.json` file and paste the following content: - -**./my-app-user-flows/budget.json** -```json -[ - { - "path": "/*", - "resourceSizes": [ - { - "resourceType": "total", - "budget": 11 - }, - { - "resourceType": "script", - "budget": 22 - } - ], - "resourceCounts": [ - { - "resourceType": "third-party", - "budget": 3 - } - ], - "timings": [ - { - "metric": "interactive", - "budget": 44 - }, - { - "metric": "first-meaningful-paint", - "budget": 55 - } - ] - } -] -``` - -2. open your `.user-flowrc.json` and add assert options: - -**./my-app-user-flows/.user-flowrc.json** -```json -{ - ... - "assert": { - "budgetPath": "./budget.json" - } -} -``` -You can also paste the whole configuration directly as array with `budgets`: - -**./my-app-user-flows/.user-flowrc.json** -```json -{ - ... - "assert": { - "budgets": [...] - } -} -``` - -Optionally you can use the `--budgetPath` or `-b` option. -Budgets configured in the RC file (or over the CLI option `--budgetPath` or `-b`). - -3. Run the `collect` command and check the output. - -### Setup budgets per user flow - -1. Open the respective user flow test and add config options to the flowOptions: - -**./my-app-user-flows/.user-flowrc.json** - ```typescript -// ... - -const userFlowProvider: UserFlowProvider = { - // ... - flowOptions : { - name: 'user-flow with budgets', - config: { - settings: { - budgets: "./budget.json" - } - } - } -}; - -module.exports = userFlowProvider; -``` -You can also paste the whole configuration directly as array: - -**./my-app-user-flows/.user-flowrc.json** - ```typescript -// ... - -const userFlowProvider: UserFlowProvider = { - // ... - flowOptions : { - name: 'user-flow with budgets', - config: { - settings: { - budgets: [...] - } - } - } -}; - -module.exports = userFlowProvider; -``` -3. Run the `collect` command and check the output. - -## How to debug? - -The different metrics available in the budget schema are derived from CDP and also present in the DevTools. -Sometimes it helps to relate to some visual representation when dealing with numbers, so here is a listing on how you can gather the numbers manually: - -All of the resource related metrics can be found in the "Network" tab. - -![performance-budget--devtools-network-tab](https://user-images.githubusercontent.com/10064416/164742005-f2483ff5-0e95-4ed9-bc78-4b80a54b1a83.png) - -The many of the timing related metrics are visible in the "Performance" tab -![performance-budget--devtools-performance-tab](https://user-images.githubusercontent.com/10064416/164570353-6f9ff215-ad25-4928-9ca1-49151a4e57ed.png) - - -# Resources -- [Use Lighthouse for performance budgets](https://web.dev/use-lighthouse-for-performance-budgets/?utm_source=lighthouse&utm_medium=node) -- [Understand the performance budget structure](https://github.com/GoogleChrome/lighthouse/blob/master/docs/performance-budgets.md) - ---- - -made with โค by [push-based.io](https://www.push-based.io) diff --git a/packages/cli/docs/raw/order-coffee.md b/packages/cli/docs/raw/order-coffee.md index 1677d877f..f41b59d54 100644 --- a/packages/cli/docs/raw/order-coffee.md +++ b/packages/cli/docs/raw/order-coffee.md @@ -2,44 +2,13 @@ Date/Time: **2023-02-14 18:32** -| Step Name | Gather Mode | Performance | Accessibility | Best Practices | Seo | Pwa | -| :------------------------- | :-----------: | :---------: | :-----------: | :------------: | :-: | :-: | -| ๐Ÿงญ Navigate to coffee cart | navigation | - | - | - | - | - | -| โ˜• Select coffee | timespan | 22/23 | - | 7/7 | - | - | -| โœ” Coffee selected | snapshot | ร˜ 3/3 | 15/16 | 5/5 | 7/9 | - | -| ๐Ÿ›’ Checkout order | timespan | 11/13 | - | 7/7 | - | - | -| ๐Ÿงพ Order checked out | snapshot | ร˜ 3/3 | 17/18 | 5/5 | 7/9 | - | -| ๐Ÿ’Œ Submit order | timespan | 13/13 | - | 7/7 | - | - | -| ๐Ÿ“ง Order submitted | snapshot | ร˜ 3/3 | 15/16 | 5/5 | 7/9 | - | -| ๐Ÿงญ Navigate to github | navigation ๐Ÿ”’ | 100 | 96 | 100 | 83 | 30 | - -
- -๐Ÿ”’ Budgets - -### ๐Ÿงญ Navigate to github - -**Resource Budget** - -| Resource Type | Requests | Transfer Size | | Over Budget | -| :-----------: | :------: | :-----------: | :------: | :---------: | -| Script | 2 | 40 Bytes | 40 Bytes | 1 request | -| Stylesheet | 2 | 39 Bytes | 39 Bytes | 1 request | -| Image | 0 | 0 Bytes | - | - | -| Media | 0 | 0 Bytes | - | - | -| Font | 0 | 0 Bytes | - | - | -| Document | 1 | 1013 Bytes | - | - | -| Other | 1 | 0 Bytes | - | 1 request | -| Third-party | 3 | 0 Bytes | - | 3 requests | - -**Timing Budget** - -| Metric | Measurement | Over Budget | -| :----------------------: | :---------: | :---------: | -| Largest Contentful Paint | 1590 ms | 1580 ms | -| First Contentful Paint | 1169 ms | 1159 ms | -| Speed Index | 1169 ms | 1159 ms | -| Total Blocking Time | 31 ms | 21 ms | -| Cumulative Layout Shift | 0 | - | - -
\ No newline at end of file +| Step Name | Gather Mode | Performance | Accessibility | Best Practices | Seo | Pwa | +|:---------------------------|:-----------:|:-----------:|:-------------:|:--------------:|:---:|:---:| +| ๐Ÿงญ Navigate to coffee cart | navigation | - | - | - | - | - | +| โ˜• Select coffee | timespan | 22/23 | - | 7/7 | - | - | +| โœ” Coffee selected | snapshot | ร˜ 3/3 | 15/16 | 5/5 | 7/9 | - | +| ๐Ÿ›’ Checkout order | timespan | 11/13 | - | 7/7 | - | - | +| ๐Ÿงพ Order checked out | snapshot | ร˜ 3/3 | 17/18 | 5/5 | 7/9 | - | +| ๐Ÿ’Œ Submit order | timespan | 13/13 | - | 7/7 | - | - | +| ๐Ÿ“ง Order submitted | snapshot | ร˜ 3/3 | 15/16 | 5/5 | 7/9 | - | +| ๐Ÿงญ Navigate to github | navigation | 100 | 96 | 100 | 83 | 30 | diff --git a/packages/cli/docs/recorder-exports.md b/packages/cli/docs/recorder-exports.md index d5ab2aeaa..7a006b63c 100644 --- a/packages/cli/docs/recorder-exports.md +++ b/packages/cli/docs/recorder-exports.md @@ -29,19 +29,18 @@ const interactions: UserFlowInteractionsFn = async ( ): Promise => { const { flow, page, browser } = ctx; - await flow.startTimespan({ stepName: 'Checkout order' }); + await flow.startTimespan({ name: 'Checkout order' }); //... Interactions await flow.endTimespan(); }; -const userFlowProvider: UserFlowProvider = { +export default { flowOptions: { name: "Order Coffee" }, interactions, -}; +} satisfies UserFlowProvider; -module.exports = userFlowProvider; ``` ## Using Recorder Replay files in Userflow @@ -83,7 +82,7 @@ const interactions: UserFlowInteractionsFn = async ( ): Promise => { // ... - await flow.startTimespan({ stepName: 'Checkout order' }); + await flow.startTimespan({ name: 'Checkout order' }); // Use the create function to instanciate a the user-flow runner. const runner = await createUserFlowRunner('./recordings/order-coffee.replay.json', ctx) @@ -140,14 +139,14 @@ const interactions: UserFlowInteractionsFn = async ( ## Combine it with custom code -We can also pass additional options to each step, such as a `stepName` the report: +We can also pass additional options to each step, such as a `name` the report: ```json [ { "type": "startTimespan", "stepOptions": { - "stepName": "Select coffee" + "name": "Select coffee" } }, { @@ -159,7 +158,7 @@ We can also pass additional options to each step, such as a `stepName` the repor ``` -![Replay userflow example with custom code and stepnames](./images/lhr-replay-example-results-3.png) +![Replay userflow example with custom code and names](./images/lhr-replay-example-results-3.png) # Advanced architecture diff --git a/packages/cli/docs/ufo-architecture.md b/packages/cli/docs/ufo-architecture.md index 50cd63c6b..5d6978c56 100644 --- a/packages/cli/docs/ufo-architecture.md +++ b/packages/cli/docs/ufo-architecture.md @@ -33,13 +33,13 @@ Let's first think about the folder structure and how we organize the different p โ”— ๐Ÿ“‚my-app-user-flows โ”ฃ ๐Ÿ“„.user-flowrc.json โ”ฃ ๐Ÿ“‚fixtures - โ”ฃ โ”— ๐Ÿ“œlist-page.ufo.ts + โ”ฃ โ”— ๐Ÿ“œlist-page.ufo.mts โ”ฃ ๐Ÿ“‚ufo - โ”ฃ โ”ฃ ๐Ÿ“œsidebar.ufo.ts - โ”ฃ โ”ฃ ๐Ÿ“œlist.ufo.ts - โ”ฃ โ”— ๐Ÿ“œlist-page.ufo.ts + โ”ฃ โ”ฃ ๐Ÿ“œsidebar.ufo.mts + โ”ฃ โ”ฃ ๐Ÿ“œlist.ufo.mts + โ”ฃ โ”— ๐Ÿ“œlist-page.ufo.mts โ”— ๐Ÿ“‚user-flows - โ”— ๐Ÿ“œmy-user-flow.uf.ts + โ”— ๐Ÿ“œmy-user-flow.uf.mts ``` ### Setup @@ -84,7 +84,7 @@ We extend from the Ufo class to get the page object set up for us and ensure the > **โ„น Tip:** > To ensure the page object is available in an UFO you can extend from `Ufo` provided in `@push-based/user-flow`. -**./ufo/sidebar.ufo.ts** +**./ufo/sidebar.ufo.mts** ```typescript export class Sidebar extends Ufo { btnSelector = fixtures.sidebarBtnSelector; @@ -102,7 +102,7 @@ export class Sidebar extends Ufo { } ``` -**./ufo/list.ufo.ts** +**./ufo/list.ufo.mts** ```typescript export class List extends Ufo { itemSelector = fixtures.movieListImgSelector; @@ -119,7 +119,7 @@ export class List extends Ufo { } ``` -**./ufo/list-page.ufo.ts** +**./ufo/list-page.ufo.mts** ```typescript // ensure page is present ๐Ÿ‘‡ export class ListPage extends Ufo { @@ -134,7 +134,7 @@ export class ListPage extends Ufo { ### User Flows -**./user-flows/my-user-flow.uf.ts** +**./user-flows/my-user-flow.uf.mts** ```typescript import { UserFlowOptions, @@ -156,7 +156,7 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi const listPage = new ListPage({page}); await flow.startTimespan({ - stepName: 'Navigate to list page', + name: 'Navigate to list page', }); // ๐Ÿ‘‡ Interaction logic @@ -166,12 +166,10 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi await flow.endTimespan(); }; -const userFlowProvider: UserFlowProvider = { - flowOptions, - interactions -}; - -module.exports = userFlowProvider; +export default { + flowOptions: { name: "Order Coffee" }, + interactions, +} satisfies UserFlowProvider; ``` ### Usage diff --git a/packages/cli/docs/writing-basic-user-flows.md b/packages/cli/docs/writing-basic-user-flows.md index 7c1d9c49a..9d8dd2f55 100644 --- a/packages/cli/docs/writing-basic-user-flows.md +++ b/packages/cli/docs/writing-basic-user-flows.md @@ -56,9 +56,9 @@ This results in the following file: } ``` -2. Create a `basic-navigation.uf.ts` file. +2. Create a `basic-navigation.uf.mts` file. -**./user-flows/basic-navigation.uf.ts** +**./user-flows/basic-navigation.uf.mts** ```typescript import { UserFlowInteractionsFn, @@ -72,7 +72,7 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi const { url } = collectOptions; await flow.navigate(url, { - stepName: 'Navigate to coffee cart', + name: 'Navigate to coffee cart', }); // Select coffee @@ -83,12 +83,10 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi }; -const userFlowProvider: UserFlowProvider = { - flowOptions: {name: 'Order Coffee'}, - interactions -}; - -module.exports = userFlowProvider; +export default { + flowOptions: { name: "Order Coffee" }, + interactions, +} satisfies UserFlowProvider; ``` 3. Run CLI @@ -96,7 +94,7 @@ You can directly run the CLI command. The typescript files will get resolved and `npx @push-based/user-flow --url=https://localhost:4200` -Optionally you can pass params to overwrite the values form `.user-flowrc.ts` +Optionally you can pass params to overwrite the values form `.user-flowrc.mts` `npx @push-based/user-flow --ufPath=./user-flows --outPath=./user-flows-reports --url=https://localhost:4200` @@ -113,7 +111,7 @@ Let's start by filling in our interaction logic: 1. Copy and paste the new lines into your flow. -**./user-flows/basic-navigation.uf.ts** +**./user-flows/basic-navigation.uf.mts** ```typescript const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promise => { // ... @@ -148,28 +146,28 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi // ... ``` -2. Wrap the sections interesting for a timespan measure with `await flow.startTimespan({ stepName: 'Select coffee' });` and `await flow.stopTimespan();`. +2. Wrap the sections interesting for a timespan measure with `await flow.startTimespan({ name: 'Select coffee' });` and `await flow.stopTimespan();`. -**./user-flows/basic-navigation.uf.ts** +**./user-flows/basic-navigation.uf.mts** ```typescript const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promise => { // ... await flow.navigate(url, { - stepName: 'Navigate to coffee cart', + name: 'Navigate to coffee cart', }); - await flow.startTimespan({ stepName: 'Select coffee' }); + await flow.startTimespan({ name: 'Select coffee' }); // Select coffee // ... await flow.endTimespan(); - await flow.startTimespan({ stepName: 'Checkout order' }); + await flow.startTimespan({ name: 'Checkout order' }); // Checkout order // ... await flow.endTimespan(); - await flow.startTimespan({ stepName: 'Submit order' }); + await flow.startTimespan({ name: 'Submit order' }); // Submit order // ... await flow.endTimespan(); @@ -180,9 +178,9 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi ## Use snapshot measures -2. Wrap the sections interesting for a snapshot measure with `await flow.snapshot({ stepName: 'step name' });`. +2. Wrap the sections interesting for a snapshot measure with `await flow.snapshot({ name: 'step name' });`. -**./user-flows/basic-navigation.uf.ts** +**./user-flows/basic-navigation.uf.mts** ```typescript // Your custom interactions with the page const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promise => { @@ -190,17 +188,17 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi // Select coffee // endTimespan here ... - await flow.snapshot({ stepName: 'Coffee selected' }); + await flow.snapshot({ name: 'Coffee selected' }); // Checkout order // endTimespan here ... - await flow.snapshot({ stepName: 'Order checked out' }); + await flow.snapshot({ name: 'Order checked out' }); // Submit order // endTimespan here ... - await flow.snapshot({ stepName: 'Order submitted' }); + await flow.snapshot({ name: 'Order submitted' }); }; // ... diff --git a/packages/cli/package.json b/packages/cli/package.json index 65aa064d1..c1f70ede3 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -4,7 +4,7 @@ "type": "module", "main": "src/index.js", "bin": { - "user-flow": "src/cli.js" + "user-flow": "src/cli.mjs" }, "license": "MIT", "repository": { diff --git a/packages/cli/project.json b/packages/cli/project.json index 39cbdade8..1cf242ca9 100644 --- a/packages/cli/project.json +++ b/packages/cli/project.json @@ -18,7 +18,7 @@ "assets": [ "README.md", "packages/cli/*.md", - "packages/cli/src/cli.js", + "packages/cli/src/cli.mjs", "packages/cli/*.schema.json", "packages/cli/**/static/**" ] diff --git a/packages/cli/src/cli.js b/packages/cli/src/cli.mjs similarity index 75% rename from packages/cli/src/cli.js rename to packages/cli/src/cli.mjs index 34066da65..08000d547 100644 --- a/packages/cli/src/cli.js +++ b/packages/cli/src/cli.mjs @@ -1,5 +1,4 @@ #!/usr/bin/env node 'use strict'; -/* eslint-disable */ import('./lib/boot-cli.js'); diff --git a/packages/cli/src/lib/commands/collect/utils/replay/types.ts b/packages/cli/src/lib/commands/collect/utils/replay/types.ts index 42d6227ac..499b85e7e 100644 --- a/packages/cli/src/lib/commands/collect/utils/replay/types.ts +++ b/packages/cli/src/lib/commands/collect/utils/replay/types.ts @@ -13,7 +13,7 @@ export type MeasureModes = 'navigate' |'snapshot' | 'startTimespan' | 'endTimesp }>;*/ export type MeasurementStep = { type: MeasureModes; - stepOptions?: { stepName?: string; } + stepOptions?: { name?: string; } url?: string; } diff --git a/packages/cli/src/lib/commands/collect/utils/user-flow/types.ts b/packages/cli/src/lib/commands/collect/utils/user-flow/types.ts index 4c386c8f7..70be175f9 100644 --- a/packages/cli/src/lib/commands/collect/utils/user-flow/types.ts +++ b/packages/cli/src/lib/commands/collect/utils/user-flow/types.ts @@ -17,7 +17,7 @@ export type UserFlowContext = { }; export type StepOptions = { - stepName: string; + name: string; } & { /*page: Page,*/ config?: Config /*configContext?: LH.Config.FRContext*/; }; @@ -59,4 +59,3 @@ export type UserFlowProvider = { interactions: UserFlowInteractionsFn; launchOptions?: LaunchOptions; }; - diff --git a/packages/cli/src/lib/commands/collect/utils/user-flow/user-flow.mock.ts b/packages/cli/src/lib/commands/collect/utils/user-flow/user-flow.mock.ts index 34bde0d93..2913736ee 100644 --- a/packages/cli/src/lib/commands/collect/utils/user-flow/user-flow.mock.ts +++ b/packages/cli/src/lib/commands/collect/utils/user-flow/user-flow.mock.ts @@ -282,8 +282,8 @@ export class UserFlowMock { * @param {LH.NavigationRequestor} requestor * @param {StepOptions=} stepOptions */ - async navigate(requestor: any, { stepName }: StepOptions = {} as StepOptions): Promise { - logVerbose(`flow#navigate: ${stepName || requestor}`); + async navigate(requestor: any, { name }: StepOptions = {} as StepOptions): Promise { + logVerbose(`flow#navigate: ${name || requestor}`); return this.page.goto(requestor); } @@ -296,21 +296,21 @@ export class UserFlowMock { /** * @param {StepOptions=} stepOptions */ - async startTimespan({ stepName }: StepOptions = {} as StepOptions): Promise { - logVerbose(`flow#startTimespan: ${stepName}`); + async startTimespan({ name }: StepOptions = {} as StepOptions): Promise { + logVerbose(`flow#startTimespan: ${name}`); return Promise.resolve(); } - async endTimespan({ stepName }: StepOptions = {} as StepOptions): Promise { - logVerbose(`flow#endTimespan: ${stepName}`); + async endTimespan({ name }: StepOptions = {} as StepOptions): Promise { + logVerbose(`flow#endTimespan: ${name}`); return Promise.resolve(); } /** * @param {StepOptions=} stepOptions */ - async snapshot({ stepName }: StepOptions = {} as StepOptions): Promise { - logVerbose(`flow#snapshot: ${stepName}`); + async snapshot({ name }: StepOptions = {} as StepOptions): Promise { + logVerbose(`flow#snapshot: ${name}`); return Promise.resolve(); } @@ -344,8 +344,8 @@ export class UserFlowReportMock { * @param {LH.NavigationRequestor} requestor * @param {StepOptions=} stepOptions */ - async navigate(requestor: any, { stepName }: StepOptions = {} as StepOptions): Promise { - logVerbose(`flow#navigate: ${stepName || requestor}`); + async navigate(requestor: any, { name }: StepOptions = {} as StepOptions): Promise { + logVerbose(`flow#navigate: ${name || requestor}`); return Promise.resolve(); } @@ -356,21 +356,21 @@ export class UserFlowReportMock { /** * @param {StepOptions=} stepOptions */ - async startTimespan({ stepName }: StepOptions = {} as StepOptions): Promise { - logVerbose(`flow#startTimespan: ${stepName}`); + async startTimespan({ name }: StepOptions = {} as StepOptions): Promise { + logVerbose(`flow#startTimespan: ${name}`); return Promise.resolve(); } - async endTimespan({ stepName }: StepOptions = {} as StepOptions): Promise { - logVerbose(`flow#endTimespan: ${stepName}`); + async endTimespan({ name }: StepOptions = {} as StepOptions): Promise { + logVerbose(`flow#endTimespan: ${name}`); return Promise.resolve(); } /** * @param {StepOptions=} stepOptions */ - async snapshot({ stepName }: StepOptions = {} as StepOptions): Promise { - logVerbose(`flow#snapshot: ${stepName}`); + async snapshot({ name }: StepOptions = {} as StepOptions): Promise { + logVerbose(`flow#snapshot: ${name}`); return Promise.resolve(); } diff --git a/packages/nx-plugin-integration/user-flows/basic-navigation.uf.ts b/packages/nx-plugin-integration/user-flows/basic-navigation.uf.ts index d2dd86b3d..6b1fcc887 100644 --- a/packages/nx-plugin-integration/user-flows/basic-navigation.uf.ts +++ b/packages/nx-plugin-integration/user-flows/basic-navigation.uf.ts @@ -5,7 +5,7 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi const { url} = collectOptions; await flow.navigate(url, { - stepName: '๐Ÿงญ Navigate to Home', + name: '๐Ÿงญ Navigate to Home', }); }; diff --git a/packages/nx-plugin/src/executors/user-flow/executor.spec.ts b/packages/nx-plugin/src/executors/user-flow/executor.spec.ts index c28314fc9..12177f7cb 100644 --- a/packages/nx-plugin/src/executors/user-flow/executor.spec.ts +++ b/packages/nx-plugin/src/executors/user-flow/executor.spec.ts @@ -9,14 +9,13 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi const { flow, collectOptions } = ctx; const { url } = collectOptions; await flow.navigate(url, { - stepName: "Navigate to "+url, + name: "Navigate to "+url, }); }; -const userFlowProvider: UserFlowProvider = { +export default { flowOptions: {name: 'Basic Navigation Example'}, - interactions -}; -module.exports = userFlowProvider; + interactions, +} satisfies UserFlowProvider; `; const NPM_NAME = '@push-based/user-flow'; diff --git a/packages/user-flow-example/.user-flowrc.json b/packages/user-flow-example/.user-flowrc.json index 3d2bcd4a7..b0803e4c2 100644 --- a/packages/user-flow-example/.user-flowrc.json +++ b/packages/user-flow-example/.user-flowrc.json @@ -1,42 +1,10 @@ { "collect": { "url": "https://coffee-cart.netlify.app/", - "ufPath": "packages/user-flow-example/user-flows", - "budgets": [ - { - "resourceSizes": [ - { - "resourceType": "total", - "budget": 26 - }, - { - "resourceType": "script", - "budget": 150 - } - ], - "resourceCounts": [ - { - "resourceType": "third-party", - "budget": 100 - } - ], - "timings": [ - { - "metric": "interactive", - "budget": 5000 - }, - { - "metric": "first-meaningful-paint", - "budget": 2000 - } - ] - } - ] + "ufPath": "packages/user-flow-example/user-flows" }, "persist": { "outputPath": "dist/user-flow/user-flow-example", - "format": [ - "md" - ] + "format": ["md"] } } diff --git a/packages/user-flow-example/package.json b/packages/user-flow-example/package.json deleted file mode 100644 index fb4de6936..000000000 --- a/packages/user-flow-example/package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "@user-flow/user-flow-example", - "version": "0.0.1", - "type": "commonjs" -} diff --git a/packages/user-flow-example/recordings/order-coffee-3.replay.json b/packages/user-flow-example/recordings/order-coffee-3.replay.json index 9676300f5..0346e2394 100644 --- a/packages/user-flow-example/recordings/order-coffee-3.replay.json +++ b/packages/user-flow-example/recordings/order-coffee-3.replay.json @@ -5,13 +5,13 @@ "type": "navigate", "url": "https://coffee-cart.netlify.app/", "stepOptions": { - "stepName": "Navigate to coffee cart" + "name": "Navigate to coffee cart" } }, { "type": "startTimespan", "stepOptions": { - "stepName": "Select coffee" + "name": "Select coffee" } }, { @@ -32,13 +32,13 @@ { "type": "snapshot", "stepOptions": { - "stepName": "Coffee selected" + "name": "Coffee selected" } }, { "type": "startTimespan", "stepOptions": { - "stepName": "Checkout order" + "name": "Checkout order" } }, { @@ -90,13 +90,13 @@ { "type": "snapshot", "stepOptions": { - "stepName": "Order checked out" + "name": "Order checked out" } }, { "type": "startTimespan", "stepOptions": { - "stepName": "Submit order" + "name": "Submit order" } }, { @@ -117,7 +117,7 @@ { "type": "snapshot", "stepOptions": { - "stepName": "Order submitted" + "name": "Order submitted" } } ] diff --git a/packages/user-flow-example/replay-examples/order-coffee-1-replay.uf.ts b/packages/user-flow-example/replay-examples/order-coffee-1-replay.uf.ts index 180e74a64..20100b8a5 100644 --- a/packages/user-flow-example/replay-examples/order-coffee-1-replay.uf.ts +++ b/packages/user-flow-example/replay-examples/order-coffee-1-replay.uf.ts @@ -1,26 +1,22 @@ import {createUserFlowRunner, UserFlowContext, UserFlowInteractionsFn, UserFlowProvider} from '@push-based/user-flow'; -// @TODO refactor when v10 update lands -import {UserFlow as LhUserFlow} from 'lighthouse'; const interactions: UserFlowInteractionsFn = async ( ctx: UserFlowContext ): Promise => { - const {flow, page, browser} = ctx; - const lhFlow: LhUserFlow = flow; + const {flow} = ctx; - await flow.startTimespan({stepName: 'Checkout order'}); + + await flow.startTimespan({name: 'Checkout order'}); // Use the create function to instanciate a the user-flow runner. const path = './recordings/order-coffee-1.replay.json'; - const runner = await createUserFlowRunner( path, { page, browser, lhFlow }); + const runner = await createUserFlowRunner( path, ctx); await runner.run(); await flow.endTimespan(); }; -const userFlowProvider: UserFlowProvider = { +export default { flowOptions: { name: "Order Coffee 1" }, interactions, -}; - -module.exports = userFlowProvider; +} satisfies UserFlowProvider; diff --git a/packages/user-flow-example/replay-examples/order-coffee-2-replay.uf.ts b/packages/user-flow-example/replay-examples/order-coffee-2-replay.uf.ts index f3aebe0eb..707f34b19 100644 --- a/packages/user-flow-example/replay-examples/order-coffee-2-replay.uf.ts +++ b/packages/user-flow-example/replay-examples/order-coffee-2-replay.uf.ts @@ -1,21 +1,16 @@ import {createUserFlowRunner, UserFlowContext, UserFlowInteractionsFn, UserFlowProvider} from '@push-based/user-flow'; -import {UserFlow as LhUserFlow} from 'lighthouse'; const interactions: UserFlowInteractionsFn = async ( ctx: UserFlowContext ): Promise => { - const {browser, page, flow } = ctx; - const lhFlow: LhUserFlow = flow; const path = './recordings/order-coffee-2.replay.json'; - const runner = await createUserFlowRunner(path, {browser, page, lhFlow }); + const runner = await createUserFlowRunner(path, ctx); await runner.run(); }; -const userFlowProvider: UserFlowProvider = { - flowOptions: { name: "Order Coffee 2" }, +export default { + flowOptions: { name: "Order Coffee 1" }, interactions, -}; - -module.exports = userFlowProvider; +} satisfies UserFlowProvider; diff --git a/packages/user-flow-example/tsconfig.json b/packages/user-flow-example/tsconfig.json index f5b85657a..a83f883e4 100644 --- a/packages/user-flow-example/tsconfig.json +++ b/packages/user-flow-example/tsconfig.json @@ -1,22 +1,5 @@ { "extends": "../../tsconfig.base.json", - "compilerOptions": { - "module": "commonjs", - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] + "include": ["**/*"], } diff --git a/packages/user-flow-example/tsconfig.spec.json b/packages/user-flow-example/tsconfig.spec.json deleted file mode 100644 index 67bf1bee7..000000000 --- a/packages/user-flow-example/tsconfig.spec.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": [ - "jest", - "node" - ] - }, - "include": [ - "jest.config.ts", - "**/*.test.ts", - "**/*.spec.ts", - "**/*.d.ts" - ] -} diff --git a/packages/user-flow-example/ufo/checkout.form.ts b/packages/user-flow-example/ufo/checkout.form.ts index 3b45f58eb..0cf7e9ea9 100644 --- a/packages/user-flow-example/ufo/checkout.form.ts +++ b/packages/user-flow-example/ufo/checkout.form.ts @@ -1,4 +1,4 @@ -import {Ufo} from '../../cli/src/lib/ufo'; +import {Ufo} from '@push-based/user-flow'; import { checkoutBtnSelector, emailInputSelector, diff --git a/packages/user-flow-example/ufo/coffee.ufo.ts b/packages/user-flow-example/ufo/coffee.ufo.ts index 72b87efa6..0a50a67b2 100644 --- a/packages/user-flow-example/ufo/coffee.ufo.ts +++ b/packages/user-flow-example/ufo/coffee.ufo.ts @@ -1,4 +1,5 @@ -import {Ufo} from '../../cli/src/lib/ufo'; +import {Ufo} from '@push-based/user-flow'; + import {cappuccinoSelector} from '../fixtures/coffee.fixture'; export class Coffee extends Ufo { diff --git a/packages/user-flow-example/user-flows/order-coffee-1.uf.ts b/packages/user-flow-example/user-flows/order-coffee-1.uf.ts index 7ca287d4d..72aea2e24 100644 --- a/packages/user-flow-example/user-flows/order-coffee-1.uf.ts +++ b/packages/user-flow-example/user-flows/order-coffee-1.uf.ts @@ -10,7 +10,7 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi const { url } = collectOptions; await flow.navigate(url, { - stepName: 'Navigate to coffee cart', + name: 'Navigate to coffee cart', }); // Select coffee @@ -21,9 +21,7 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi }; -const userFlowProvider: UserFlowProvider = { +export default { flowOptions: {name: 'Order Coffee'}, interactions -}; - -module.exports = userFlowProvider; +} satisfies UserFlowProvider; diff --git a/packages/user-flow-example/user-flows/order-coffee-2.uf.ts b/packages/user-flow-example/user-flows/order-coffee-2.uf.ts index a0f6f36f5..49b80f52b 100644 --- a/packages/user-flow-example/user-flows/order-coffee-2.uf.ts +++ b/packages/user-flow-example/user-flows/order-coffee-2.uf.ts @@ -1,4 +1,4 @@ -import {UserFlowContext, UserFlowInteractionsFn, UserFlowProvider} from '@push-based/'; +import { UserFlowContext, UserFlowInteractionsFn, UserFlowProvider } from '@push-based/user-flow'; // Your custom interactions with the page const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promise => { @@ -6,7 +6,7 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi const { url } = collectOptions; await flow.navigate(url, { - stepName: 'Navigate to coffee cart', + name: 'Navigate to coffee cart', }); @@ -37,9 +37,7 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi }; -const userFlowProvider: UserFlowProvider = { +export default { flowOptions: {name: 'Order Coffee'}, interactions -}; - -module.exports = userFlowProvider; +} satisfies UserFlowProvider; diff --git a/packages/user-flow-example/user-flows/order-coffee-3.uf.ts b/packages/user-flow-example/user-flows/order-coffee-3.uf.ts index 9184cb320..43a638125 100644 --- a/packages/user-flow-example/user-flows/order-coffee-3.uf.ts +++ b/packages/user-flow-example/user-flows/order-coffee-3.uf.ts @@ -7,10 +7,10 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi // Navigate to coffee order site await flow.navigate(url, { - stepName: 'Navigate to coffee cart', + name: 'Navigate to coffee cart', }); - await flow.startTimespan({ stepName: 'Select coffee' }); + await flow.startTimespan({ name: 'Select coffee' }); // Select coffee const cappuccinoItem = '.cup:nth-child(1)'; @@ -20,7 +20,7 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi await flow.endTimespan(); - await flow.startTimespan({ stepName: 'Checkout order' }); + await flow.startTimespan({ name: 'Checkout order' }); // Checkout order const checkoutBtn = '[data-test=checkout]'; @@ -38,7 +38,7 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi await flow.endTimespan(); - await flow.startTimespan({ stepName: 'Submit order' }); + await flow.startTimespan({ name: 'Submit order' }); // Submit order const submitBtn = '#submit-payment'; @@ -51,9 +51,7 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi }; -const userFlowProvider: UserFlowProvider = { +export default { flowOptions: {name: 'Order Coffee'}, interactions -}; - -module.exports = userFlowProvider; +} satisfies UserFlowProvider; diff --git a/packages/user-flow-example/user-flows/order-coffee-4.uf.ts b/packages/user-flow-example/user-flows/order-coffee-4.uf.ts index b09c2ba73..6feadbdf5 100644 --- a/packages/user-flow-example/user-flows/order-coffee-4.uf.ts +++ b/packages/user-flow-example/user-flows/order-coffee-4.uf.ts @@ -7,10 +7,10 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi // Navigate to coffee order site await flow.navigate(url, { - stepName: 'Navigate to coffee cart', + name: 'Navigate to coffee cart', }); - await flow.startTimespan({ stepName: 'Select coffee' }); + await flow.startTimespan({ name: 'Select coffee' }); // Select coffee const cappuccinoItem = '.cup:nth-child(1)'; @@ -19,10 +19,10 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi await flow.endTimespan(); - await flow.snapshot({ stepName: 'Coffee selected' }); + await flow.snapshot({ name: 'Coffee selected' }); - await flow.startTimespan({ stepName: 'Checkout order' }); + await flow.startTimespan({ name: 'Checkout order' }); // Checkout order const checkoutBtn = '[data-test=checkout]'; @@ -39,9 +39,9 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi await flow.endTimespan(); - await flow.snapshot({ stepName: 'Order checked out' }); + await flow.snapshot({ name: 'Order checked out' }); - await flow.startTimespan({ stepName: 'Submit order' }); + await flow.startTimespan({ name: 'Submit order' }); // Submit order const submitBtn = '#submit-payment'; @@ -52,13 +52,11 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi await flow.endTimespan(); - await flow.snapshot({ stepName: 'Order submitted' }); + await flow.snapshot({ name: 'Order submitted' }); }; -const userFlowProvider: UserFlowProvider = { +export default { flowOptions: {name: 'Order Coffee'}, interactions -}; - -module.exports = userFlowProvider; +} satisfies UserFlowProvider; diff --git a/packages/user-flow-example/user-flows/order-coffee-5.uf.ts b/packages/user-flow-example/user-flows/order-coffee-5.uf.ts index d2ff03cf5..e06300ff6 100644 --- a/packages/user-flow-example/user-flows/order-coffee-5.uf.ts +++ b/packages/user-flow-example/user-flows/order-coffee-5.uf.ts @@ -17,32 +17,30 @@ const interactions: UserFlowInteractionsFn = async (ctx: UserFlowContext): Promi // Navigate to coffee order site await flow.navigate(url, { - stepName: 'Navigate to coffee cart' + name: 'Navigate to coffee cart' }); - await flow.startTimespan({ stepName: 'Select coffee' }); + await flow.startTimespan({ name: 'Select coffee' }); // Select coffee coffeeUfo.selectCappuccino(); await flow.endTimespan(); - await flow.snapshot({ stepName: 'Coffee selected' }); + await flow.snapshot({ name: 'Coffee selected' }); - await flow.startTimespan({ stepName: 'Checkout order' }); + await flow.startTimespan({ name: 'Checkout order' }); // Checkout order await checkoutFormUfo.openOrder(); await checkoutFormUfo.fillCheckoutForm(formData); await flow.endTimespan(); - await flow.snapshot({ stepName: 'Order checked out' }); + await flow.snapshot({ name: 'Order checked out' }); - await flow.startTimespan({ stepName: 'Submit order' }); + await flow.startTimespan({ name: 'Submit order' }); // Submit order await checkoutFormUfo.submitOrder(); await flow.endTimespan(); - await flow.snapshot({ stepName: 'Order submitted' }); + await flow.snapshot({ name: 'Order submitted' }); }; -const userFlowProvider: UserFlowProvider = { +export default { flowOptions: { name: 'Order Coffee' }, interactions -}; - -module.exports = userFlowProvider; +} satisfies UserFlowProvider; diff --git a/packages/user-flow-gh-integration/README.md b/packages/user-flow-gh-integration/README.md index 8d07f2a6a..1b5672071 100644 --- a/packages/user-flow-gh-integration/README.md +++ b/packages/user-flow-gh-integration/README.md @@ -1,4 +1,3 @@ # user-flo-ci-integration -This folder contains the user flow examples fo the CI integration. - +This folder contains the user flow examples for the CI integration. diff --git a/packages/user-flow-gh-integration/data/checkout.data.ts b/packages/user-flow-gh-integration/data/checkout.data.ts deleted file mode 100644 index 6b5c8b603..000000000 --- a/packages/user-flow-gh-integration/data/checkout.data.ts +++ /dev/null @@ -1 +0,0 @@ -export const formData = { name: 'nina', email: 'nina@gmail.com' }; diff --git a/packages/user-flow-gh-integration/package.json b/packages/user-flow-gh-integration/package.json deleted file mode 100644 index d37b68e18..000000000 --- a/packages/user-flow-gh-integration/package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "@user-flow/user-flow-gh-integration", - "version": "0.0.1", - "type": "commonjs" -} diff --git a/packages/user-flow-gh-integration/tsconfig.json b/packages/user-flow-gh-integration/tsconfig.json deleted file mode 100644 index 592e5cc4e..000000000 --- a/packages/user-flow-gh-integration/tsconfig.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "module": "CommonJS", - "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true - }, - "files": [], - "include": [], - "references": [ - { - "path": "./tsconfig.lib.json" - }, - { - "path": "./tsconfig.spec.json" - } - ] -}