{"id":13452441,"url":"https://github.com/flood-io/element","last_synced_at":"2025-04-12T06:14:08.765Z","repository":{"id":32602424,"uuid":"135109381","full_name":"flood-io/element","owner":"flood-io","description":"💦Load test your app using real web browsers","archived":false,"fork":false,"pushed_at":"2023-07-21T12:48:26.000Z","size":30266,"stargazers_count":352,"open_issues_count":146,"forks_count":43,"subscribers_count":14,"default_branch":"canary","last_synced_at":"2024-10-04T09:31:47.071Z","etag":null,"topics":["automation","chrome","devtools","http","javascript","load-testing","node","nodejs","performance-monitoring","performance-testing","puppeteer","puppeteer-extra","test-automation","webdriver"],"latest_commit_sha":null,"homepage":"https://element.flood.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flood-io.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-05-28T04:27:39.000Z","updated_at":"2024-10-03T18:35:31.000Z","dependencies_parsed_at":"2024-01-16T03:46:30.689Z","dependency_job_id":"dddda560-b1d6-448a-b15c-008cb9038500","html_url":"https://github.com/flood-io/element","commit_stats":{"total_commits":1235,"total_committers":40,"mean_commits":30.875,"dds":0.751417004048583,"last_synced_commit":"1c95ba6a5dfdd3c5e3d4ef6b7cf6fc41d991e1ac"},"previous_names":[],"tags_count":385,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flood-io%2Felement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flood-io%2Felement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flood-io%2Felement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flood-io%2Felement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flood-io","download_url":"https://codeload.github.com/flood-io/element/tar.gz/refs/heads/canary","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219865643,"owners_count":16555927,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["automation","chrome","devtools","http","javascript","load-testing","node","nodejs","performance-monitoring","performance-testing","puppeteer","puppeteer-extra","test-automation","webdriver"],"created_at":"2024-07-31T07:01:24.232Z","updated_at":"2024-10-10T20:10:22.930Z","avatar_url":"https://github.com/flood-io.png","language":"TypeScript","readme":"[![Flood Element](/assets/Repo-header.png)](https://element.flood.io)\n\n\u003cp align=\"center\"\u003e\n  \u003ca aria-label=\"Flood Logo\" href=\"https://github.com/flood-io\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/MADE%20BY%20FLOOD-4285f4.svg?style=for-the-badge\u0026labelColor=4285f4\u0026logo=Flood\u0026logoColor=FFFFFF\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/element-cli/\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/npm/v/element-cli.svg?style=for-the-badge\u0026labelColor=000000\u0026color=6554C0\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"License\" href=\"/LICENSE\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/npm/l/@flood/element-cli.svg?style=for-the-badge\u0026labelColor=000000\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"join us in spectrum\" href=\"https://spectrum.chat/flood/element\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge\u0026labelColor=000000\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\nFlood Element is a browser based load generation tool built on top of Puppeteer. It provides an easy to use set of commands for automating most user interfaces, including mouse actions such as click and drag, keyboard key press actions, and working with inputs, buttons, and menus.\n\nElement is designed purely to generate load by simulating real user behaviour within a browser. It does not attempt to manipulate the page or work with any specific front-end framework, although it works great for testing SPAs built in React, Angular, Ember, or any other JS heavy client framework.\n\nThe goals of Element scripts are to be:\n\n- Understandable\n- Easy to write and maintain\n- Declarative for expressing user actions\n\nScaling up Element tests is easy on [Flood](https://flood.io), by launching hundreds or even thousands of instances of Google Chrome, and running the scripts you write to drive a load test. We call this Browser Level Load Testing.\n\n- [Quickstart](#quickstart)\n\n  - [1. Install Element](#1-install-element)\n\n    - [Stable release](#stable-release)\n    - [Beta release](#beta-release)\n    - [Canary release](#canary-release)\n\n  - [2. Initialize Your Project](#2-initialize-your-project)\n\n  - [3. Write and Validate Your Script](#3-write-and-validate-your-script)\n\n  - [4. Run a real Load Test on Flood](#4-run-a-real-load-test-on-flood)\n\n- [About](#about)\n  - [What can I do with it?](#what-can-i-do-with-it)\n- [Do more with Element](#do-more-with-element)\n- [Contributing](#contributing)\n- [Reporting Issues](#reporting-issues)\n- [Authors](#authors)\n\n## Quickstart\n\n### 1. Install Element\n\n**Install using NPM:**\n\nFirst, make sure you have installed the [latest version of NodeJS](https://nodejs.org) for your platform.\n\n#### Stable release\n\n\u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/element-cli/\"\u003e\n  \u003cimg alt=\"\" src=\"https://img.shields.io/npm/v/element-cli.svg?style=for-the-badge\u0026labelColor=000000\u0026color=6554C0\"\u003e\n\u003c/a\u003e\n\n```bash\n# Using yarn\nyarn global add element-cli\n\n# Using npm\nnpm i -g element-cli\n\n# Verify installation\nelement --version\n```\n\n#### Beta release\n\n\u003ca aria-label=\"Beta NPM version\" href=\"https://www.npmjs.com/package/element-cli/\"\u003e\n  \u003cimg alt=\"\" src=\"https://img.shields.io/npm/v/element-cli/beta.svg?style=for-the-badge\u0026labelColor=000000\"\u003e\n\u003c/a\u003e\n\n```bash\n# Using yarn\nyarn global add element-cli@beta\n\n# Using npm\nnpm i -g element-cli@beta\n\n# Verify installation\nelement --version\n```\n\n#### Canary release\n\n\u003ca aria-label=\"Canary NPM version\" href=\"https://www.npmjs.com/package/element-cli/\"\u003e\n  \u003cimg alt=\"\" src=\"https://img.shields.io/npm/v/element-cli/canary.svg?style=for-the-badge\u0026labelColor=000000\"\u003e\n\u003c/a\u003e\n\n```bash\n# Using yarn\nyarn global add element-cli@canary\n\n# Using npm\nnpm i -g element-cli@canary\n\n# Verify installation\nelement --version\n```\n\n#### v1 release\n\n\u003ca aria-label=\"v1 NPM version\" href=\"https://www.npmjs.com/package/element-cli/\"\u003e\n  \u003cimg alt=\"\" src=\"https://img.shields.io/npm/v/element-cli/v1.svg?style=for-the-badge\u0026labelColor=000000\"\u003e\n\u003c/a\u003e\n\n```bash\n# Using yarn\nyarn global add element-cli@v1\n\n# Using npm\nnpm i -g element-cli@v1\n\n# Verify install\nelement --version\n```\n\n### 2. Initialize Your Project\n\nUsing the `element` command, you can generate a new project or generate a test within your existing project.\n\n**Generate a new project**\n\n```bash\nelement init ./my-element-project\n```\n\nThis will create a new project an test.ts file with a single step stubbed out for you.\n\n**Or, generate a new file**\n\n```bash\nelement generate load-test-dashboard\n```\n\nThis will create a new file with a single step stubbed out for you.\n\n### 3. Write and Validate Your Script\n\nEdit `test.ts` in your editor of choice. To learn more about the scripting capabilities we've put together a detailed tutorial on [testing the \"Flood Merchandise Store\"](./packages/element/docs/examples/scenario_1_wordpress.md).\n\nAs you're writing your script, you can validate it by running it locally using `element run`:\n\n```bash\nelement run test.ts\n```\n\nThis will run the script in an instance of Chrome and output the results locally.\n\nFor details of the available options see the [`element run`](./packages/cli/README.md#element-run) guide.\n\n### 4. Run a real Load Test on [Flood](https://flood.io)\n\nNow that you have a test script, upload it to [Flood](https://app.flood.io) as a [new Stream](https://guides.flood.io/scripting-and-tools/flood-element/getting-started-with-element#create-a-stream) and launch a Flood (a test).\n\nSince Element version 1.3, you can [launch a flood directly from Element CLI](https://element.flood.io/docs/next/guides/cli#run-an-element-script-on-flood)\n\n## About\n\nOver the years, countless customers have mentioned that getting started with Load Testing is a daunting task. That's why it's often left until the last minute before launch. At Flood, it's our mission to make Load Testing less daunting and accessible to everyone. We want to give developers and testers an easy way to ensure that whatever part of the system they're responsible for meets expectations for both functionality and performance.\n\n### What can I do with it?\n\n- Flood Element can be used to **apply load to any web accessible application** and measure how it performs as the load is ramped up.\n- **Measure performance regressions** after deploys by integrating it with your CI/CD pipeline.\n- Measure your application's response time from different regions as experienced by your customers.\n- Create **realistic load scenarios** which stress test your network infrastructure without developing complex protocol level load test scripts.\n\n## Do more with Element\n\nContinue learning more Flood Element techniques by starting with our [API documentation](https://element.flood.io/docs/). The main entry point to all tests is the [Browser](https://element.flood.io/docs/1.0/api/browser) class and a great place to get a feel for the capabilities of each test.\n\nVisit \u003ca aria-label=\"Element documentation\" href=\"https://element.flood.io\"\u003ehttps\u0026#x3A;//element.flood.io\u003c/a\u003e to view the documentation.\n\n## Contributing\n\nPlease see our [CONTRIBUTING.md](/CONTRIBUTING.md).\n\n## Reporting Issues\n\nIf you encounter any issues with the `@flood/element` project or Flood Element product, please [open an issue](https://github.com/flood-io/element/issues) on the GitHub project.\n\nIf you're encountering issues with Flood itself, please contact Flood Support from within the Flood Dashboard, [send us an email](mailto:support@flood.io) or [ask our community](https://spectrum.chat/flood).\n\n## Authors\n\n- Ivan Vanderbyl ([@ivanderbyl](https://twitter.com/ivanderbyl)) – [Flood](https://flood.io)\n- Lachie Cox ([@lachiecox](https://twitter.com/lachiecox)) – [Flood](https://flood.io)\n- Andy Stanford-Bluntish ([@andybluntish](https://twitter.com/andybluntish)) – [Flood](https://flood.io)\n","funding_links":[],"categories":["TypeScript","chrome"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflood-io%2Felement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflood-io%2Felement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflood-io%2Felement/lists"}