Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lucasvtiradentes/page_actions_attacher
🤖 tampermonkey helper package that enables easy addition of custom actions to specific pages, making it particularly valuable for simplifying form-filling tasks.
https://github.com/lucasvtiradentes/page_actions_attacher
automation cypress frontend nodejs package tampermonkey typescript userscript
Last synced: 6 days ago
JSON representation
🤖 tampermonkey helper package that enables easy addition of custom actions to specific pages, making it particularly valuable for simplifying form-filling tasks.
- Host: GitHub
- URL: https://github.com/lucasvtiradentes/page_actions_attacher
- Owner: lucasvtiradentes
- License: mit
- Created: 2023-10-11T10:37:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-14T00:43:48.000Z (about 1 year ago)
- Last Synced: 2025-01-06T22:05:30.263Z (about 1 month ago)
- Topics: automation, cypress, frontend, nodejs, package, tampermonkey, typescript, userscript
- Language: TypeScript
- Homepage:
- Size: 873 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.MD
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
PAGE ACTIONS ATTACHER
Features • Requirements • Usage • Development • About
see table of content
## :trumpet: Overview
This package is a tampermonkey helper that enables easy addition of custom actions to specific pages, making it particularly valuable for simplifying form-filling tasks.
code
result
Instead of manually filling out a four-step website form to view your current working page, why not simplify the process by clicking a button that completes it for you? 🤖
## :question: Motivation
My main motivation for building this tool was to save time when filling out forms in my React applications during the development phase.
* It's important to note that this tool does not aim (or would be able) to replace end-to-end testing tools. Instead, it serves as a more efficient and faster option specifically for development phase.
* I have explored other solutions such as [Cypress](https://www.cypress.io) and [Selenium](https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd), but they didn't meet my needs for:
* Keyboard shortcuts;
* Synchronization between multiple developers;
* Randomly generated data, particularly unique Brazilian person and company numbers;
* Allow me to fill the form while inside my vscode debugger chrome instance.
## :dart: Features
✔️ atach a floating buttom with custom actions (`ctrl+space` to toogle it);
✔️ out of the box browser methods to fill website forms (type, click, etc);
✔️ dynamic keybinding to all available options (`1-9`) when the options container is displayed;
✔️ allow custom configs (color scheme, debug_mode, custom shortcuts, etc);
✔️ ready to use examples provided on [./examples](./examples), including [one](./examples/3_with_header_buttons.js) that has auto-updatable feature.
## :warning: Requirements
The only requirement to use this project is [tamper monkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=pt-BR), a browser extension which allow us to autorun some javascript on certain specified websites.
## :bulb: Usage
### Install
* 1 - install [tamper monkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=pt-BR) to your browser;
* 2 - click on "tamper monkey icon" and after on "Create a new script...";
* 3 - paste the initial tamper monkey basic example [1_basic.js](./examples/1_basic.js) to the document content and save it;
* 4 - go to the [saucedemo](https://www.saucedemo.com) site and hit `ctrl+space` to show the options menu;
* 4 - click on the available options or hit the `numeric keys (1 - 9)` when the options menu appears;
* 5 - get inspired by the other [./examples](./examples) and have fun!
### Uninstall
If you want to uninstall, just remove the tamper monkey userscript on its dashboard.
### How it works
This project will
- atach a floating button with custom options to the specified website;
- it will get the package content from [jsdelivr](https://cdn.jsdelivr.net/npm/page_actions_attacher) and save it to storage so you dont have to fetch it all the time;
### Available methods
Show all available methods
This package comes with the following commands list:
Command
Methods
Description
attach(optionsArr, headerOptionsArr?)
-
Used to atach your options to the floating button. You can also specify custom header options.
help()
-
Show helper information on runtime environment.
dataUtils()
.generateCNPJ()
Generate a unique Brazilian identification number for each company.
.generateCPF()
Generate a unique Brazilian identification number for each individual.
.generateCompanyName()
Generate a randomly generated company name.
.generatePersonName()
Generate a randomly generated person name.
.generatePersonEmail()
Generate a randomly generated person email.
.generatePersonUsername()
Generate a randomly generated person username.
.removeNumbersFromString(text)
Remove all numbers from a text.
.getOnlyNumbersFromString(text)
Remove all characters except numbers from a text.
.generateRandomNumberBetweenInterval(min, max)
Get a number betweeen a specified ineterval.
.generateRandomNumbers(length)
Generate a randomly generated number with a specified length.
browserUtils()
.delay(milliseconds, ignoreLog?)
Introduces a delay in the program execution for the specified number of milliseconds. If ignoreLog parameter is provided and set to true, the function will suppress any logging or output during the delay.
.getElementByTagText(tag, textToFind, itemIndex?)
Returns the HTML element with the specified tag that contains the given text to find. If itemIndex is provided, it retrieves the element at the specified index when multiple elements are found.
.getElementByTagAttributeValue(tag, attribute, attributeValue, itemIndex?)
Returns the HTML element with the specified tag that has the attribute matching the given attribute value. If itemIndex is provided, it retrieves the element at the specified index when multiple elements are found.
.getElementBySelector(selector)
Returns the HTML element that matches the specified CSS selector. The selector can be used to target elements by tag name, class name, ID, or other CSS selectors.
.getElementByInputName(inputName)
Returns the HTML element that matches the specified input element name.
.typeOnInputByElement(htmlElement, text)
Simulates typing the specified text into the given htmlElement. This function interacts with the HTML input element and populates it with the provided text.
.typeOnInputBySelector(selector, text)
Simulates typing the specified text into the HTML input element selected using the given selector. This function interacts with the input element matching the selector and populates it with the provided text.
.typeOnInputByInputName(inputName, text)
Simulates typing the specified text into the HTML input element selected using the given input name. This function interacts with the input element matching the selector and populates it with the provided text.
.clickElement(htmlElement)
Simulates a click on the specified htmlElement. This function triggers a click event on the element, simulating a user interaction as if the element were physically clicked.
.clickElementBySelector(selector)
Simulates a click on the HTML element selected using the given selector. This function triggers a click event on the element matching the selector, simulating a user interaction as if the element were physically clicked.
.clickElementByTagText(tag, textToFind, itemIndex?)
Simulates a click on the HTML element with the specified tag that contains the given textToFind. If itemIndex is provided, it clicks on the element at the specified index when multiple elements are found. This function simulates a user interaction as if the element were physically clicked.
.clickElementByTagAttributeValue(tag, attribute, attributeValue, itemIndex?)
Simulates a click on the HTML element with the specified tag that has the attribute matching the given attributeValue. If itemIndex is provided, it clicks on the element at the specified index when multiple elements are found. This function simulates a user interaction as if the element were physically clicked.
.generateFormRow(name, value, onAfterClickAction?)
Generates a form row with the specified name and value. If onAfterClickAction is provided, it specifies an optional action to perform after clicking the form row.
.getModal(title)
Utility function for easily handling modals on the options. The function returns two functions, one to update the modal's content and another to close the modal.
.showToast(message, seconds?)
Utility function for easily creating toast messages.
## :wrench: Development
### Development setup
Show instructions for development setup
To setup this project in your computer, run the following commands:
```bash
# Clone this repository
$ git clone https://github.com/lucasvtiradentes/page_actions_attacher
# Go into the repository
$ cd page_actions_attacher
# Install dependencies
$ npm install
```
If you want to [contribute](./docs/CONTRIBUTING.md) to the project, fork the project, make the necessary changes, and to test your work you can load the ./tests/index.html on your browser after run a npm run build command.
### Used technologies
This project uses the following thechnologies:
Scope
Subject
Technologies
Main
Main
Setup
Code linting
Commit linting
Other
## :books: About
## Related
- [cypress](https://www.cypress.io): With Cypress, you can easily create tests for your modern web applications, debug them visually, and automatically run them in your continuous integration builds;
- [robotframework](https://robotframework.org): Robot Framework is a generic open source automation framework. It can be used for test automation and robotic process automation (RPA);
- [selenium IDS](https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd): Selenium Record and Playback tool for ease of getting acquainted with Selenium WebDriver.
## License
This project is distributed under the terms of the MIT License Version 2.0. A complete version of the license is available in the [LICENSE](LICENSE) file in this repository. Any contribution made to this project will be licensed under the MIT License Version 2.0.
## Feedback
If you have any questions or suggestions you are welcome to discuss it on [github issues](https://github.com/lucasvtiradentes/page_actions_attacher/issues) or, if you prefer, you can reach me in my social media provided bellow.
