Features • Requirements • Usage • Development • About
see table of content
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? 🤖
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 and Selenium, 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.
✔️ 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, including one that has auto-updatable feature.
The only requirement to use this project is tamper monkey, a browser extension which allow us to autorun some javascript on certain specified websites.
- 1 - install tamper monkey 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 to the document content and save it;
- 4 - go to the saucedemo site and hit
ctrl+spaceto 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 and have fun!
If you want to uninstall, just remove the tamper monkey userscript on its dashboard.
This project will
- atach a floating button with custom options to the specified website;
- it will get the package content from jsdelivr and save it to storage so you dont have to fetch it all the time;
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. |
Show instructions for development setup
To setup this project in your computer, run the following commands:
# Clone this repository
$ git clone https://github.com/lucasvtiradentes/page_actions_attacher
# Go into the repository
$ cd page_actions_attacher
# Install dependencies
$ npm installIf you want to contribute 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.
This project uses the following thechnologies:
| Scope | Subject | Technologies |
|---|---|---|
| Main | Main |
|
| Setup | Code linting |
|
| Commit linting |
|
|
| Other |
|
- cypress: 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: Robot Framework is a generic open source automation framework. It can be used for test automation and robotic process automation (RPA);
- selenium IDS: Selenium Record and Playback tool for ease of getting acquainted with Selenium WebDriver.
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 file in this repository. Any contribution made to this project will be licensed under the MIT License Version 2.0.
If you have any questions or suggestions you are welcome to discuss it on github issues or, if you prefer, you can reach me in my social media provided bellow.
