Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ Customize and automate user flows beyond Chrome DevTools Recorder

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š Customize and automate user flows beyond Chrome DevTools Recorder


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: developer.chrome.com

Interested in helping improve DevTools? Sign up to participate in Google User Research here.

Letโ€™s admit it, writing automated tests is not the most fun thing in a developerโ€™s life. As developers, we want to write features, fix bugs, and improve the world! However, when we donโ€™t have automated testing in our workflows, in the long term, things can get quite buggy. So, we also think that writing automated tests is important.

With the Recorder panel in Chrome DevTools, you can record and replay user flows, export it to various formats (e.g. test scripts) through different 3rd-party extensions and libraries, customize the user flows with Puppeteer Replay library, and integrate them with your existing workflows.

In this blog post, weโ€™re going to discuss:

  • how to export and replay user flows programmatically
  • how to customize your user flows with the help of Puppeteer Replay
  • how to integrate with your CI/CD workflows

This blog post assumes you know the basics of Recorder. If you are new, follow this short introductory tutorial and video guide to get started.

Export user flows and replay programmatically

By default, the Recorder gives you the ability to export these recordings as a Puppeteer or Puppeteer Replay script, or as a plain JSON file.

Export options.

Once you export the user flows as JSON files, you have the options to import it back to the Recorder panel and replay it, or use external libraries to replay it. Puppeteer Replay library is one of the libraries.

Replay with Puppeteer Replay

Follow the instructions on the repository to install Puppeteer Replay.

Letโ€™s say you save your JSON user flows in the recordings folder (e.g. demo project), you can use the following command to execute one or more user flows.

# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json

# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json

Optionally, you can add an npm script for running the recordings; add this line to the scripts field in the package.json :

"replay-all": "replay recordings"

With that, you can run npm run replay-all in the command line to replay all recordings.

User flows replay without UI by default (a.k.a headless mode). If you would like to see the UI, set the PUPPETEER_HEADLESS environment variable to false before running the command.

PUPPETEER_HEADLESS=false npm run replay-all

Replay with 3rd-party libraries

There are some third party libraries you can use to replay beyond Chrome browser. Here is the full list of libraries.

For example, TestCafe is an end-to-end testing framework. It supports replaying JSON user flows with Safari and more!

npm install -g testcafe

# replay with selected browsers
testcafe safari ./recordings/order-one-coffee.json
testcafe firefox ./recordings/order-one-coffee.json
testcafe chrome ./recordings/order-one-coffee.json

# replay with all browsers
testcafe all ./recordings/order-one-coffee.json

On the other hand, Saucelabs is a cloud-based test platform. It supports replaying JSON user flows with different browsers and versions on the cloud.

Here is an example configuration file in Saucelabs. Check out the demo repository.

apiVersion: v1alpha
kind: puppeteer-replay
suites:
- name: "order a coffee"
recordings: [ "recordings/order-a-coffee.json" ]
โ€ฆ

Export user flows with different extensions

Apart from the default options, you can also install extensions to export user flows to different formats.

Export user flows with different extensions.

For example, you can record and export the user flows as WebPageTest custom script. With the script, you can test the performance of multi-step user flows through your applications. Writing those scripts, however, can sometimes be challenging.

In addition to that, If you already have testing tools in place, there are extensions to export user flows to different test scripts like Cypress, Nightwatch, WebdriverIO, Testing Library, and more. Here is the full list. This could help your and your team bootstrap tests quicker.

Transform to different test scripts programmatically

On top of the extensions, most of these test providers also published libraries to help you convert multiple JSON user flows programmatically.

For example, use the @cypress/chrome-recorder libraries to export user flows to Cypress tests.

npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json

Build your own extensions or libraries

Behind the scenes, all extensions and libraries are built on top of the Puppeteer Replay library. Apart from allowing you to replay user flows, Puppeteer Replay offers APIs letting you customize or transform user flows replay.

Customize user flows replay

Letโ€™s build a screenshot plugin. For each user flow, we want to:

  • take a screenshot at the end of every step and save it to the _screenshots folder
  • output a message when the user flow execution is completed

Here is the code snippet. You can download this demo and play with it too.

/* screenshot-plugin.mjs */

import { mkdirSync } from "fs";
import { PuppeteerRunnerExtension } from "@puppeteer/replay";

// create folder if not exist
let screenshotFolder = "_screenshots";
mkdirSync(screenshotFolder, { recursive: true });

export default class ScreenshotPlugin extends PuppeteerRunnerExtension {
count = 0;

async afterEachStep(step, flow) {
await super.afterEachStep(step, flow);
this.count = this.count + 1;

const path = `${screenshotFolder}/${flow.title}-${this.count}.png`;
await this.page.screenshot({ path });

console.log(`Saved screenshot as ${path}`);
}

async afterAllSteps(step, flow) {
await super.afterAllSteps(step, flow);
console.log("Operation completed successfully.");
}
}

The code is pretty expressive itself. We extend the PuppeteerRunnerExtension API to save the screenshot after each step, and log a message after all the steps.

Save the file, then we can run user flows with this extension using the following command:

# replay one user flow with plugin 
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/order-a-coffee.json

# replay all user flows with plugin under recordings folder
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/*.json

Here is the output:

Saved screenshot as _screenshots/order-a-coffee-1.png
Saved screenshot as _screenshots/order-a-coffee-2.png
Saved screenshot as _screenshots/order-a-coffee-3.png
โ€ฆ

Operation completed successfully.

Transform user flows

Another way to customize the user flow is to transform it into different formats (e.g. Cypress, Nightwatch test scripts, etc).

For example, your user flow contains a step to navigate to an url. Here is how the JSON file looks like:

{
"title": "order-a-coffee",
"steps": [
{
"type": "navigate",
"url": "https://coffee-cart.netlify.app/"
},
โ€ฆ
]
}

You can create a stringify plugin, to transform the step to javascript. You can view other existing libraries to see how they do it.

For example, the code snippet below shows how WebdriverIO transform the navigation step.


export class StringifyPlugin extends PuppeteerStringifyExtension {

#appendStepType(out: LineWriter, step: Step, flow: UserFlow) {
switch (step.type) {
case 'navigate':
return out.appendLine(`await browser.url(${formatAsJSLiteral(step.url)})`)
โ€ฆ
}

When you run the plugin with the user flows, the navigation line translates into await browser.url(โ€˜https://coffee-cart.netlify.app/โ€™).

Publish Chrome extensions

Once you customize and transform the user flows, you can package it as a Chrome extension and publish it to the Chrome Web Store.

Refer to this demo and instructions to learn how to debug locally and publish a Chrome extension.

Integrate with your CI / CD pipeline

There are multiple ways to do it and there are tons of tools out there. Here is an example of automating it with GitHub Actions.

# .github/node.js.yml

name: Replay recordings

on:
push:
branches: [ "main" ]
schedule:
- cron: '30 12 * * *' # daily 12:30pm

jobs:
build:

runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'
- run: npm install puppeteer
- run: npm run replay-all
- run: npm run start

In this example, we will replay the user flows when:

  • new changes push to the main branch
  • every day 12:30pm

Apart from GitHub Actions, you can integrate with your favorite cloud providers too. Go to this demo to see how you can use Google Cloud Run Job to execute up to 10,000 user flows in parallel!

Conclusion

In this blog post, weโ€™ve discussed the different options to export user flows as JSON files, customize replays with PuppeteerReplayExtension, transform user flows with PuppeteerStringifyExtension and integrate them in your CI workflows.

I hope this blog post has given you some ideas about how you can use the Recorder panel and the tools provided to make it easier to integrate a testing workflow into your projects. Canโ€™t wait to see what you will build!

Download the preview channels

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Submit a suggestion or feedback to us via crbug.com.
  • Report a DevTools issue using the More options ย  More ย  > Help > Report a DevTools issues in DevTools.
  • Tweet at @ChromeDevTools.
  • Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.

More from the Chrome DevTools team

Subscribe to Chrome DevTools blog to stay up to date with the DevTools news.

...



๐Ÿ“Œ Customize and automate user flows beyond Chrome DevTools Recorder


๐Ÿ“ˆ 98.08 Punkte

๐Ÿ“Œ How to edit and extend user flows with Recorder and Puppeteer Replay | DevTools Tips


๐Ÿ“ˆ 58.18 Punkte

๐Ÿ“Œ DevTools Tips: How to emulate CSS user preference media features with DevTools


๐Ÿ“ˆ 35.03 Punkte

๐Ÿ“Œ Automatically create Technical Documentation for your Power Apps and Power Automate Flows


๐Ÿ“ˆ 34.67 Punkte

๐Ÿ“Œ Different ways to open Chrome DevTools | DevTools Tips


๐Ÿ“ˆ 33.58 Punkte

๐Ÿ“Œ Build Power Apps from a drawing & Power Automate Flows using natural language


๐Ÿ“ˆ 32.87 Punkte

๐Ÿ“Œ AnyRec Screen Recorder 1.1.20.4838 - Screen and webcam recorder.


๐Ÿ“ˆ 30.74 Punkte

๐Ÿ“Œ DevTools Tips: Faster DevTools navigation


๐Ÿ“ˆ 29.24 Punkte

๐Ÿ“Œ Debugging PWA with DevTools | DevTools Tips


๐Ÿ“ˆ 29.24 Punkte

๐Ÿ“Œ Discover CSS issues with DevTools | DevTools Tips


๐Ÿ“ˆ 29.24 Punkte

๐Ÿ“Œ DevTools Tips: Source maps in DevTools


๐Ÿ“ˆ 29.24 Punkte

๐Ÿ“Œ DevTools Tips: Different ways to open DevTools


๐Ÿ“ˆ 29.24 Punkte

๐Ÿ“Œ Desktop-Recorder: Free Screen Video Recorder


๐Ÿ“ˆ 28.94 Punkte

๐Ÿ“Œ Desktop-Recorder: Free Screen Video Recorder


๐Ÿ“ˆ 28.94 Punkte

๐Ÿ“Œ Goodbye, Green Recorder ยท foss-project/green-recorder@5fc594b ยท Dev gives up on making it work on wayland.


๐Ÿ“ˆ 28.94 Punkte

๐Ÿ“Œ How to Install Peek Gif Screen Recorder in Ubuntu โ€“ A Best Gif Recorder for Linux


๐Ÿ“ˆ 28.94 Punkte

๐Ÿ“Œ How to Install Green Recorder Desktop Screen Recording Software in Ubuntu โ€“ A Best Free Screen Recorder for Linux


๐Ÿ“ˆ 28.94 Punkte

๐Ÿ“Œ How to Install Peek Gif Screen Recorder in Ubuntu โ€“ A Best Gif Recorder for Linux


๐Ÿ“ˆ 28.94 Punkte

๐Ÿ“Œ Vidmore Screen Recorder for Mac 1.1.22 - Screen Recorder for any occasion.


๐Ÿ“ˆ 28.94 Punkte

๐Ÿ“Œ FoneDog Screen Recorder 1.0.2 - FoneDog Screen Recorder is a powerful software to record anything you want on Mac without watermark.


๐Ÿ“ˆ 28.94 Punkte

๐Ÿ“Œ Download Power Automate Desktop for Windows 10 to automate tasks and processes at no additional cost


๐Ÿ“ˆ 28.14 Punkte

๐Ÿ“Œ You can now use the Automate tab in Excel for Windows and Mac to automate tasks


๐Ÿ“ˆ 28.14 Punkte

๐Ÿ“Œ The New 80/20 Rule for SecOps: Customize Where it Matters, Automate the Rest


๐Ÿ“ˆ 27.37 Punkte

๐Ÿ“Œ If you could automate one process what would you automate?


๐Ÿ“ˆ 26.34 Punkte

๐Ÿ“Œ Automate every Industry using Power Automate with Roma Gupta | #LessCodeMorePower


๐Ÿ“ˆ 26.34 Punkte

๐Ÿ“Œ Improving user safety in OAuth flows through new OAuth Custom URI scheme restrictions


๐Ÿ“ˆ 25.49 Punkte

๐Ÿ“Œ Google Chrome prior 48.0.2564.109 Developer Tools chrome-devtools-frontend.appspot.com remoteBase privilege escalation


๐Ÿ“ˆ 23.3 Punkte

๐Ÿ“Œ Google Chrome vor 48.0.2564.109 Developer Tools chrome-devtools-frontend.appspot.com remoteBase erweiterte Rechte


๐Ÿ“ˆ 23.3 Punkte

๐Ÿ“Œ Google Chrome vor 48.0.2564.109 Developer Tools chrome-devtools-frontend.appspot.com remoteBase erweiterte Rechte


๐Ÿ“ˆ 23.3 Punkte

๐Ÿ“Œ Generate Logic Apps and Flows to Publish Smart Contract Events to Event Grid and Service Bus


๐Ÿ“ˆ 23.3 Punkte

๐Ÿ“Œ Binary Recompilation via Dynamic Analysis and the Protection of Control and Data-flows Therein


๐Ÿ“ˆ 23.3 Punkte

๐Ÿ“Œ Generate Logic Apps and Flows to Publish Smart Contract Events to Event Grid and Service Bus | Block Talk


๐Ÿ“ˆ 23.3 Punkte











matomo