diff --git a/microsoft-edge/devtools-guide-chromium/about-tools.md b/microsoft-edge/devtools-guide-chromium/about-tools.md index 03c65294da..1069f8a7a4 100644 --- a/microsoft-edge/devtools-guide-chromium/about-tools.md +++ b/microsoft-edge/devtools-guide-chromium/about-tools.md @@ -58,6 +58,7 @@ Microsoft Edge DevTools includes the following tools. | **Performance** tool | Analyze runtime performance, which is how your page performs when it's running, as opposed to loading. | [Introduction to the Performance tool](evaluate-performance/index.md) | | **Performance monitor** tool | Provides a real-time view of the runtime performance of a webpage, to determine where performance problems come from, making a website run slowly. Finds whether problems are from high memory or CPU usage, too-frequent layout and style calculations, or too many DOM nodes and event listeners. | [Measure runtime performance of a page using the Performance monitor tool](performance-monitor/performance-monitor-tool.md) | | **Quick source** tool | Use the **Quick source** tool to display or edit source files when using a tool other than the **Sources** tool. | [Display or edit source files using the Quick source tool](quick-source/quick-source-tool.md) | +| **Recorder** tool | Use the **Recorder** tool to record user flows manually, and then replay them automatically to speed up testing and performance investigations. | [Record and replay user flows and measure performance](recorder/index.md) | | **Rendering** tool | Use the **Rendering** tool to see what your webpage looks like with different display options or vision deficiencies. | [Rendering tool, to see what a webpage looks like with different display options or vision deficiencies](rendering-tools/rendering-tool.md) | | **Search** tool | Use the **Search** tool to find specific source files for a webpage, including HTML, CSS, JavaScript, and image files. | [Find source files for a page using the Search tool](search/search-tool.md) | | **Security** tool | Inspects the security of a page. | [Understand security issues using the Security tool](security/index.md) | diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/add-breakpoint.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/add-breakpoint.png new file mode 100644 index 0000000000..5eb6a8aa2c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/add-breakpoint.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/add-remove-selector.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/add-remove-selector.png new file mode 100644 index 0000000000..47a9bd0573 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/add-remove-selector.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/add-step.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/add-step.png new file mode 100644 index 0000000000..14e0177fd5 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/add-step.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/create-new-recording.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/create-new-recording.png new file mode 100644 index 0000000000..a1b8a5c027 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/create-new-recording.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/delete-icon.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/delete-icon.png new file mode 100644 index 0000000000..a70c5d5c99 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/delete-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/delete-recording.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/delete-recording.png new file mode 100644 index 0000000000..37152abb93 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/delete-recording.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/edit-selector-value.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/edit-selector-value.png new file mode 100644 index 0000000000..f94e5ec95f Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/edit-selector-value.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/expand-icon.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/expand-icon.png new file mode 100644 index 0000000000..a4cdac596a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/expand-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/export-for-test.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/export-for-test.png new file mode 100644 index 0000000000..4ffeb5a0d1 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/export-for-test.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/export-icon.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/export-icon.png new file mode 100644 index 0000000000..727ac66d1b Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/export-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/export-json.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/export-json.png new file mode 100644 index 0000000000..656ea48432 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/export-json.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/final-recording.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/final-recording.png new file mode 100644 index 0000000000..1dc39ed60c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/final-recording.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/import-icon.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/import-icon.png new file mode 100644 index 0000000000..34ac6d2ddc Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/import-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/import-recording.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/import-recording.png new file mode 100644 index 0000000000..f6dd9ebc67 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/import-recording.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/list-of-interactions.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/list-of-interactions.png new file mode 100644 index 0000000000..65abb65cb6 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/list-of-interactions.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/measure-performance.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/measure-performance.png new file mode 100644 index 0000000000..93983a48a8 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/measure-performance.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/more-tools-icon.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/more-tools-icon.png new file mode 100644 index 0000000000..71ff8ed5a2 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/more-tools-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/new-recording-icon.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/new-recording-icon.png new file mode 100644 index 0000000000..71ff8ed5a2 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/new-recording-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/paused-replay.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/paused-replay.png new file mode 100644 index 0000000000..12cb11581c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/paused-replay.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/performance-tool.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/performance-tool.png new file mode 100644 index 0000000000..d3850c11ac Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/performance-tool.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/play-from-list.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/play-from-list.png new file mode 100644 index 0000000000..0d39716e92 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/play-from-list.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/play-from-recording.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/play-from-recording.png new file mode 100644 index 0000000000..1e5fc6759a Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/play-from-recording.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/recorder-tool.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/recorder-tool.png new file mode 100644 index 0000000000..eac9a401ce Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/recorder-tool.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/recordings-dropdown.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/recordings-dropdown.png new file mode 100644 index 0000000000..83d61237c8 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/recordings-dropdown.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/remove-step.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/remove-step.png new file mode 100644 index 0000000000..93df4ce44c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/remove-step.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/replay-slow.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/replay-slow.png new file mode 100644 index 0000000000..e027da14ea Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/replay-slow.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/replayed-interactions-animation.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/replayed-interactions-animation.png new file mode 100644 index 0000000000..7bbed28d7d Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/replayed-interactions-animation.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/select-element-in-page.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/select-element-in-page.png new file mode 100644 index 0000000000..e8480e8efd Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/select-element-in-page.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/start-recording.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/start-recording.png new file mode 100644 index 0000000000..684541b140 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/start-recording.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/step-actions-icon.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/step-actions-icon.png new file mode 100644 index 0000000000..9c13286ea6 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/step-actions-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/step-details.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/step-details.png new file mode 100644 index 0000000000..898fdf6ef4 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/step-details.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index-images/step-type-dropdown.png b/microsoft-edge/devtools-guide-chromium/recorder/index-images/step-type-dropdown.png new file mode 100644 index 0000000000..9696cc6f87 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/recorder/index-images/step-type-dropdown.png differ diff --git a/microsoft-edge/devtools-guide-chromium/recorder/index.md b/microsoft-edge/devtools-guide-chromium/recorder/index.md new file mode 100644 index 0000000000..b8fc36c19f --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/recorder/index.md @@ -0,0 +1,323 @@ +--- +title: Record and replay user flows and measure performance +description: Use the Recorder tool to record a series of steps in a browser window, and then replay them automatically, while optionally also measuring performance. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 02/21/2024 +--- +# Record and replay user flows and measure performance + +Use the **Recorder** tool to record a series of steps in the browser window or tab where DevTools is opened, and then replay the steps automatically, while optionally also measuring performance. + + + +## When to use the Recorder tool + +Use the **Recorder** tool when you want to speed up repetitive tasks by automatically replaying a series of user interactions in the browser. + +The **Recorder** tool records user interactions, such as mouse clicks, keyboard input, and page navigation events, and lets you replay the interactions automatically. You can also use the **Recorder** tool to measure the runtime performance while replaying the recorded user interactions. The **Recorder** tool lets you record as many user flows as you want, and replay them as many times as you want. + +For the rest of this article, we'll use the **Recorder** tool to automate adding tasks to the demo [TODO app](https://microsoftedge.github.io/Demos/demo-to-do/). + + + +## Open the Recorder tool + +1. Open the [TODO app](https://microsoftedge.github.io/Demos/demo-to-do/) in a new tab or window. + +1. To open DevTools, right-click the webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). DevTools opens. + +1. In DevTools, on the **Activity Bar**, select the **Recorder** tab. If that tab isn't visible, click the **More tools** (![More tools icon](./index-images/more-tools-icon.png)) button, and then select **Recorder**. The **Recorder** tool opens: + + ![The demo TODO app and the Recorder tool in DevTools, next to it](./index-images/recorder-tool.png) + + + +## Record a user flow + +To start recording a new user flow: + +1. Click **Create a new recording**. + +1. Under **Recording name**, enter a name for the recording, such as "Adding TODO tasks". + +1. Click **Start recording** at the bottom of the **Recorder** tool: + + ![The recording name and start recording button](./index-images/start-recording.png) + +1. In the rendered webpage, interact with the page. For example, enter "task 1" in the **Add a task** input box, and then press **Enter**. Repeat these steps multiple times. + + A red circle appears next to the recording name, indicating that the recording is in progress. The **Recorder** tool records your interactions and displays them as a list of steps: + + ![The recorded user interactions displayed as a list in the Recorder tool](./index-images/list-of-interactions.png) + +1. To stop the recording, at the bottom of the list of recorded interactions, click the **End recording** button. + + The recording stops, and the circle next to the recording name turns blue, indicating that the recording is complete: + + ![The finalized recording and the Replay button](./index-images/final-recording.png) + + + +## Record other user flows + +To record a new user flow, after you've stopped the recording of the previous user flow: + +1. Click the **Create a new recording** (![Create a new recording button](./index-images/new-recording-icon.png)) button in the top-left corner of the **Recorder** tool: + + ![The 'Create a new recording' button](./index-images/create-new-recording.png) + +1. Repeat the steps from [Record a user flow](#record-a-user-flow), above. + + + +## Replay a user flow + +You can replay user flows either from the list of recorded user flows, or when viewing the details of a given user flow. + +* To view the list of recorded user flows, click the dropdown menu that's in the **Recorder** tool toolbar, at the top, and then select **2 recording(s)**. The label might show a different number of recordings, depending on how many recordings you've made. + +* To view the details of a given user flow, click the dropdown list that's in the **Recorder** tool toolbar, at the top, and then click the name of a user flow. + + + +#### Replay a user flow from the list of recordings + +1. Click the **Play recording** button next to a recording: + + ![The list of recordings, with a 'Play recording' button next to each recording](./index-images/play-from-list.png) + +1. Wait while the **Recorder** tool replays the previously recorded user interactions. An animation of the steps that are being replayed appears in the **Recorder** tool: + + ![The replayed interactions displayed as an animation in the Recorder tool](./index-images/replayed-interactions-animation.png) + + When the replay is complete, the animation stops, and the **Recorder** tool displays the recording's steps. + + + +#### Replay a user flow from a recording + +1. Click the **Replay** button in the top-right corner of the **Recorder** tool: + + ![The Replay button on a recorded user flow details page](./index-images/play-from-recording.png) + +1. Wait while the **Recorder** tool replays the previously recorded user interactions. An animation of the steps that are being replayed appears in the **Recorder** tool: + + ![The replayed interactions displayed as an animation in the Recorder tool](./index-images/replayed-interactions-animation.png) + + When the replay is complete, the animation stops, and the **Recorder** tool displays the recording's steps. + + + +#### Slowly replay a user flow to investigate issues + +To see what's happening in the rendered page while the user interactions are being replayed, slow down the replay speed. By default, the **Recorder** tool replays user flows as fast as it can. + +To slow down the replay speed: + +* Click the dropdown arrow next to **Replay** in the top-right corner of the **Recorder** tool, and then select a speed from the dropdown menu, such as **Slow**, **Very slow**, or **Extremely slow**: + + ![The Replay button and the Speed dropdown menu](./index-images/replay-slow.png) + + + +#### Pause while replaying a user flow, by using breakpoints + +To inspect the rendered webpage at a specific point of the user flow, pause the replay by using a breakpoint. + +To add a breakpoint to a user flow: + +1. Next to the flow step at which to pause, click the **Open step actions** (![The Open step actions icon](./index-images/step-actions-icon.png)) button , and then select **Add breakpoint**: + + ![The 'Open step actions' button and the 'Add breakpoint' menu item](./index-images/add-breakpoint.png) + +1. To start the user flow, click **Replay** in the top-right corner of the **Recorder** tool. + + The replay pauses when it reaches the step that has a breakpoint. The **Continue** and **Execute one step** buttons also become available in the toolbar: + + ![The paused replay at a step with a breakpoint](./index-images/paused-replay.png) + +1. Click the **Execute one step** button to execute the next step and pause again, or click the **Continue** button to continue the replay until the next breakpoint (or the end of the user flow) is reached. + + + +## Measure performance + +To measure how fast a website runs while replaying a series of user interactions, use the **Recorder** tool. By recording a user flow once, you can replay the recording many times, while working on improving the runtime performance of the website. + +1. To record a new user flow, follow the steps from [Record a user flow](#record-a-user-flow). + +1. To replay the user flow while measuring performance, click **Performance panel** in the top-right corner of the **Recorder** tool: + + ![The Performance panel button](./index-images/measure-performance.png) + +1. Wait while the **Recorder** tool replays the previously recorded user interactions. + + The **Performance** tool opens, and displays a recording of the performance of the website while the user interactions were being replayed: + + ![The Performance tool displaying a recording of the performance of the website](./index-images/performance-tool.png) + + + +## Edit the steps of a user flow + +After you've recorded a user flow, you can edit the steps of the user flow. For example, you can add new steps, remove existing steps, or edit the details of a step. + + + +#### Add a new step + +To add a new step to an existing user flow: + +1. Click the **Open step actions** (![The 'Open step actions' icon](./index-images/step-actions-icon.png)) button next to the step before or after which you want to add a new step, and then select **Add step before** or **Add step after**: + + ![The 'Open step actions' icon and the 'Add step' button](./index-images/add-step.png) + +1. Follow the instructions in [Edit a step](#edit-a-step) below, to edit the details of the new step that you added. The new step is temporarily named **Wait for element**. + + + +#### Edit a step + +To edit the details of an existing step: + +1. To open the details section of the step you want to edit, click the triangle (![The triangle expand icon](./index-images/expand-icon.png)) button next to the step. The details section of the step opens: + + ![The expanded details section for a step of the user flow](./index-images/step-details.png) + +1. Edit the details of the step, such as the **type** of step, the **selectors** of the DOM element the step applies to, or the properties of the step. The various types of steps and their properties are listed in the section below. Your changes are saved automatically. + + + +###### Change the type of step + +To change the type of step when editing the details of a step: + +1. Click the input box next to **type**. For example, if the step you're editing has the type **waitForElement**, click the input box that contains the value **waitForElement**. + +1. Delete the contents of the input box, and then select the new type of step you want to use from the dropdown menu that appears: + + ![The Type dropdown menu](./index-images/step-type-dropdown.png) + +You can use the following types of steps when editing a step in a user flow. Each step type has a list of properties that apply to the step. + +| Step type | Description | Properties | +|:--- |:--- |:--- | +| `change` | Change the value of a form input field. | **selectors**: Ways to find the element that this step applies to.
**value**: The value to set the form input field to. | +| `click` | Click an element. | **selectors**: Ways to find the element this step applies to.
**offsetX**/**offsetY**: How far from the top left corner of the element to click. | +| `close` | Close the browser window. | None. | +| `doubleClick` | Double-click an element. | **selectors**: Ways to find the element that this step applies to.
**offsetX**/**offsetY**: How far from the top left corner of the element to double-click. | +| `emulateNetworkConditions` | Emulate different network conditions. | **download**/**upload**: The download and upload speeds, in bytes per second.
**latency**: The minimum latency from a request being sent to the response being received, in milliseconds. | +| `hover` | Emulate the pointer hovering over an element. | **selectors**: Ways to find the element that this step applies to. | +| `keyDown` | Press a key down. | **selectors**: Ways to find the element that this step applies to.
**key**: Which key to press. | +| `keyUp` | Release a pressed key. | **selectors**: Ways to find the element that this step applies to.
**key**: Which key to release. | +| `navigate` | Navigate to a different webpage. | **url**: The URL of the page to navigate to. | +| `scroll` | Scroll to a position in the webpage. | **x**/**y**: The optional horizontal and vertical coordinates of the position to scroll to in the page. | +| `setViewport` | Change the viewport size, device pixel ratio, and capabilities. | **width**/**height**: The size of the viewport.
**deviceScaleFactor**: The device pixel ratio.
**isMobile**: Whether the viewport is a mobile device viewport.
**hasTouch**: Whether the viewport supports touch events.
**isLandscape**: Whether the viewport is in a landscape orientation. | +| `waitForElement` | Wait for an element, or for multiple elements, to be present in the webpage. | **selectors**: Ways to find the element that this step applies to. | +| `waitForExpression` | Wait until a JavaScript expression evaluates to `true`. | **expression**: The JavaScript expression to evaluate. | + + + +###### Edit the selectors of a step + +Many step types have a **selectors** property, which specifies the DOM element that the step applies to. For example, a `click` step has a **selectors** property to define which element in the page is clicked when that step of the user flow runs. + +The **selectors** property is a list of one or more selectors. Each selector in the list can be a different way to find the element in the page. The **Recorder** tool tries each selector in the list, in order, until it finds an element in the page that matches the selector. + +A selector can be any of the following types: + +* A CSS selector, such as `#my-element-with-id` or `.my-class`. +* A XPath selector, prefixed with `xpath/`, such as `xpath//html/body/form/div/label`. +* The text content of the element, prefixed with `text/`, such as `text/Add a task`. + +You can edit the selectors of a step by either approach: +* Selecting an element in the rendered webpage. +* Manually add, remove, or modify a selector. + + +* To edit the selectors by selecting an element in the rendered webpage, click **Select an element in the page to update selectors**, and then click the element in the rendered webpage that you want to select. The **Recorder** tool updates the list of selectors to match the selected element: + + ![The Select element button](./index-images/select-element-in-page.png) + + +* You can manually add, remove, or modify a selector: + + * To add or remove a selector, under **Selectors**, hover over a selector, and then click **Add a selector** or **Remove a selector**: + + ![The Add and Remove a selector buttons](./index-images/add-remove-selector.png) + + * To modify the value of a selector, under **Selectors**, click the input box that contains the value of the selector, and then enter the new value for the selector: + + ![The selector value input box](./index-images/edit-selector-value.png) + + + +#### Delete a step + +To delete a step from an existing user flow: + +1. Click the **Open step actions** (![The Open step actions icon](./index-images/step-actions-icon.png)) button next to the step you want to delete, and then select **Remove step**: + + ![The 'Open step actions' button and the 'Remove step' button](./index-images/remove-step.png) + + + +## Delete a user flow + +To delete a previously recorded user flow, when viewing the list of recordings, click **Delete recording** (![The Delete recording icon](./index-images/delete-icon.png)) next to the recording you want to delete: + +![The list of recordings, and the 'Delete recording' button next to each recording](./index-images/delete-recording.png) + + + +## Export and import user flows as files + +To share a user flow with other people, export your recorded user flow as a JSON file. For example, sharing a user flow can help other people reproduce a bug by running the same set of steps as you. + + + +#### Export a user flow as a file + +To share a user flow with another person, export the user flow as a JSON file: + +1. When viewing the steps of a user flow, click the **Export** (![The Export button](./index-images/export-icon.png)) button in the **Recorder** tool toolbar, and then select **JSON**: + + ![The Export button dropdown menu and the JSON option](./index-images/export-json.png) + +1. Select a location at which to save the file. The file is saved with the name of the user flow, and the extension `.json`. + + + +#### Import a user flow from a file + +To import a user flow from a JSON file: + +1. In the **Recorder** tool toolbar, click the **Import recording** (![The Import recording icon](./index-images/import-icon.png)) button: + + ![The Import recording button](./index-images/import-recording.png) + +1. In the file chooser dialog that opens, select a user flow JSON file, and then click the **Open** button. The user flow is imported, and appears in the list of recordings in the **Recorder** tool. + + + +## Export a user flow for test automation + +To generate a test script and run it automatically with a test automation framework, export a user flow as a `.js` test script file, as follows: + +1. When viewing the steps of a user flow, in the **Recorder** tool toolbar, click the **Export** (![The Export button](./index-images/export-icon.png)) button, and then select an export format: + + ![The Export button dropdown menu and the various test automation formats](./index-images/export-for-test.png) + + | Export format | Test automation framework | + |:--- |:--- | + | `@puppeteer/replay` | Exports the user flow as a test script for the **Replay** library. See the [puppeteer / replay](https://github.com/puppeteer/replay) repo. | + | Puppeteer | Exports the user flow as a test script for the Puppeteer test automation framework. See [Puppeteer](https://pptr.dev). | + | Puppeteer (including Lighthouse analysis) | Exports the user flow as a test script for the Puppeteer test automation framework, and includes a Lighthouse analysis of the performance of the website. | + + The **Save As** dialog opens. + +1. Select a location in which to save the file. The file is saved with the name of the user flow, and the extension `.js`. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120.md b/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120.md index 797392361d..772ef707eb 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2023/12/devtools-120.md @@ -67,7 +67,7 @@ During recording, interactions with the webpage are listed: ![Recorder tool while recording](./devtools-120-images/recorder-tool-3.png) See also: -* [Record, replay, and measure user flows](https://developer.chrome.com/docs/devtools/recorder) +* [Record and replay user flows and measure performance](../../../recorder/index.md) diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 945d43fdc2..f961126ae5 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -562,11 +562,17 @@ href: devtools-guide-chromium/performance-monitor/performance-monitor-tool.md displayName: Performance monitor tool # Quick source tool ----------------------------------------------------------- - - name: Quick source tool # new jump page + - name: Quick source tool # jump page items: - name: Display or edit source files using the Quick source tool href: devtools-guide-chromium/quick-source/quick-source-tool.md displayName: Quick source tool # also indexed elsewhere in this file +# Recorder tool ----------------------------------------------------------- + - name: Recorder tool + items: + - name: Record and replay user flows and measure performance + href: devtools-guide-chromium/recorder/index.md + displayName: Recorder tool # Rendering tool -------------------------------------------------------------- - name: Rendering tool items: