Chrome Extension Auto-fill, Auto-click - Zapzap

Zapzap - Chrome Extension auto-fill, auto-click

As developers, we do a lot of testing especially on payment page to test the flow.

I'm sure you're familiar with 4242 4242 4242 4242. If you are then you must know how many times you have to type that when developing a new product/feature.

With Zapzap, you can automate any website with simple statements!

So not only payment websites, you can make use of Zapzap for your own web development too.

Features

✓ Zapzap Chrome Extension

✓ Works with websites built with React

✓ Builder Mode

✓ Auto-Click Buttons

✓ Auto-Fill Inputs

✓ Lifetime Updates

Builder Mode

v0.2 introduces a builder mode whereby you can select an element on the webpage and it will appear in the script. Please watch the video to see how it works.

https://www.youtube.com/watch?v=PTAp9QljYeY

Community Scripts

1. Stripe
2. Lemon Squeezy

Writing Your Own Scripts

In ZapZap, each statement follows this general pattern.

action;selector[index];value

In total there are 5 actions you can perform.

• input
• file (new!)
• click
• wait
• iframe

Note that we use ; to determine the next instruction.

The selector is exactly what you will use when you put in the parameter of

document.querySelectorAll(<HERE>)

Since there could be multiple selectors, we will need to pass in the index by doing so.
The following will select the SECOND input with type text.

input[type=text][1]

Below are some examples.

input;<selector: Selector>;<value: string>

input;input[type=text][0];jack

This will look for the selector input[type=text] and select the index 0 if multiple elements exists. It will then set the value to jack

file;<selector: Selector>;<value: string>

Video Tutorial: https://youtu.be/Iq9Q6M8fpmk

file;input[type=file][0];data.csv

This will look for the selector input[type=file] and select the first element. It will then use the file data.csv which is uploaded using the Add Files button.

file;input[type=file][0];https://example.com/data.csv

This will look for the selector input[type=file] and select the first element. It will then fetch the file from the link and populate the file input field.

click;<selector: Selector>

click;button[0]

This will look for the selector button and select the index 0 if multiple elements exists. It will then click the button.

wait;<timeout: int>

wait;1000

This will wait for 1 second before moving to the next statement

iframe;<action: Action>
*note: currently this works for only Stripe. You can try to edit manifest.json to include the site you need to support iframe and iframeStripe.js.

Prefix iframe if there's an iframe in the page and you want to modify the value.

iframe;click;button[0]

This will find the first iframe in the page and click the first button.

iframe;input;textarea[0];Hello

This will find the first textarea in the iframe and set the textarea value to Hello.