Mie-simulijs NPM

mie-simulijs

mie-simulijs is a JavaScript library that helps simulate events on a webpage. It can simulate mouse and keyboard events programmatically.

Usage

Here is how you can use the mie-simulijs library to simulate click and keypress events.

Using CDN

Include the following script tag in your HTML file:

<script src="https://unpkg.com/mie-simulijs"></script>

Simulating Click Event

Create an HTML file (e.g., click-test.html) with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulijs Click Test</title>
    <script src="https://unpkg.com/mie-simulijs"></script>
</head>
<body>
    <h1>Simulijs Click Test</h1>

    <button id="testButton">Click me</button>
    <div id="clickResult"></div>

    <script>
        // Ensure simulijs is accessible
        const { simulateClick } = window.simulijs;

        // Select the element
        const testButton = document.getElementById('testButton');
        const clickResult = document.getElementById('clickResult');

        // Add event listener to log event
        testButton.addEventListener('click', () => {
            clickResult.textContent = 'Button was clicked!';
            console.log('Button was clicked!');
        });

        // Simulate events using simulijs
        window.onload = () => {
            // Simulate a button click
            simulateClick(testButton);
        };
    </script>
</body>
</html>

Simulating Keypress Event

Create an HTML file (e.g., keypress-test.html) with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulijs Keypress Test</title>
    <script src="https://unpkg.com/mie-simulijs"></script>
</head>
<body>
    <h1>Simulijs Keypress Test</h1>

    <input type="text" id="testInput" placeholder="Type something here">
    <div id="keypressResult"></div>

    <script>
        // Ensure simulijs is accessible
        const { simulateKeyPress } = window.simulijs;

        // Select the element
        const testInput = document.getElementById('testInput');
        const keypressResult = document.getElementById('keypressResult');

        // Add event listener to log event
        testInput.addEventListener('keydown', (event) => {
            keypressResult.textContent = `Key "${event.key}" was pressed!`;
            console.log(`Key "${event.key}" was pressed!`);
        });

        // Simulate events using simulijs
        window.onload = () => {
            // Simulate a key press
            simulateKeyPress(testInput, 'a');
        };
    </script>
</body>
</html>

Using npm

If you prefer to use npm, you can install the package and include it in your project:

npm install mie-simulijs

Then, you can require it in your JavaScript files:

const simulijs = require('mie-simulijs');

Functions

simulateClick

Simulates a mouse click on a given element.

Parameters

element (HTMLElement): The element to click.
options (Object): Optional settings.
- button (String): The mouse button to use for the click. Default is 'left'. Possible values are 'left', 'middle', and 'right'.
- callback (Function): A function to call after the click event is dispatched.
- delay (Number): The delay before the click event is dispatched, in milliseconds. Default is 100.

Example

simulijs.simulateClick(document.getElementById('myButton'), {
  button: 'right',
  callback: () => console.log('Right click simulated!'),
  delay: 200
});

simulateKeyPress

Simulates a key press on a given element.

Parameters

element (HTMLElement): The element to type into.
key (String): The key to simulate.
callback (Function): A function to call after the key press event is dispatched.
delay (Number): The delay before the key press event is dispatched, in milliseconds. Default is 100.

Example

simulijs.simulateKeyPress(document.getElementById('myInput'), 'a', () => console.log('Key press simulated!'));

simulateKeyDown

Simulates a key down event on the document.

Parameters

keyCode (Number): The key code of the key to simulate.
callback (Function): A function to call after the key down event is dispatched.
delay (Number): The delay before the key down event is dispatched, in milliseconds. Default is 100.

Example

simulijs.simulateKeyDown(13, () => console.log('Enter key down simulated!'));

simulateKeyUp

Simulates a key up event on the document.

Parameters

keyCode (Number): The key code of the key to simulate.
callback (Function): A function to call after the key up event is dispatched.
delay (Number): The delay before the key up event is dispatched, in milliseconds. Default is 100.

Example

simulijs.simulateKeyUp(13, () => console.log('Enter key up simulated!'));

simulateMouseEnter

Simulates a mouse enter event on a given element.

Parameters

element (HTMLElement): The element to simulate the event on.
callback (Function): A function to call after the mouse enter event is dispatched.
delay (Number): The delay before the mouse enter event is dispatched, in milliseconds. Default is 100.

Example

simulijs.simulateMouseEnter(document.getElementById('myDiv'), () => console.log('Mouse enter simulated!'));

simulateMouseLeave

Simulates a mouse leave event on a given element.

Parameters

element (HTMLElement): The element to simulate the event on.
callback (Function): A function to call after the mouse leave event is dispatched.
delay (Number): The delay before the mouse leave event is dispatched, in milliseconds. Default is 100.

Example

simulijs.simulateMouseLeave(document.getElementById('myDiv'), () => console.log('Mouse leave simulated!'));

simulateFocus

Simulates a focus event on a given element.

Parameters

element (HTMLElement): The element to simulate the event on.
callback (Function): A function to call after the focus event is dispatched.
delay (Number): The delay before the focus event is dispatched, in milliseconds. Default is 100.

Example

simulijs.simulateFocus(document.getElementById('myInput'), () => console.log('Focus simulated!'));

simulateChange

Simulates a change event on a given element.

Parameters

element (HTMLElement): The element to simulate the event on.
callback (Function): A function to call after the change event is dispatched.
delay (Number): The delay before the change event is dispatched, in milliseconds. Default is 100.

Example

simulijs.simulateChange(document.getElementById('mySelect'), () => console.log('Change simulated!'));

simulationSelector

Selects an element based on various criteria (ID, class, XPath, etc.) and returns the element if found.

Parameters

value (String): The value used to select the element. It can be an ID, class, CSS selector, or XPath.

Example

const element = simulijs.simulationSelector('#myId');
if (element) {
  console.log('Element found!', element);
} else {
  console.log('Element not found!');
}

Usage

Include the SimuliJS library in your project and use the provided functions to simulate user interactions.

<script src="path/to/simulijs.js"></script>
<script>
  // Example usage
  simulijs.simulateClick(document.getElementById('myButton'));
</script>

SimuliJS makes it easy to automate and test user interactions on your web pages.

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago