Introduction to Input Actions

Input actions allow you to automate form filling, searches, selections, and button clicks. webSlinger validates each input action in real-time to ensure it will work reliably in automation.

Input Overlay Features

Once the input overlay is activated, you'll notice:

• Colored boxes around input fields, buttons, dropdowns, and other interactive elements
• Boxes scroll smoothly with the page content
• Different colors for different element types

Try It: Checkbox Selection

Let's practice recording a checkbox action:

1. Right-click on any checkbox above
2. In the context menu, choose to set the checkbox state (checked or unchecked)
3. Click Record
4. Watch as the checkbox state is set to your choice in BOTH the main tab and the validation tab
5. Try different checkboxes and states
6. Check the validation log - you'll see each checkbox action recorded!
7. Note: clicking on the checkbox directly will also work to toggle the checkbox. But for an automation it is better to set the state rather than depend on it initially being in one state or the other.

Try It: Dropdown Selection

Now let's try recording a dropdown selection:

1. Right-click on the dropdown above
2. Leave the selection method set to option text
3. In Target selection, select a city from the menu
4. Click Record
5. Watch as the selection is mirrored in the validation tab
6. The city information appears in both tabs simultaneously
7. Check the validation log for the recorded action

Try It: Paste Action and Button Click

Let's fill a form and record a button submission:

1. Right-click on the input field above
2. Type in a name and click Record
3. Right-click on the Submit button
4. Click Record in the context menu
5. Note how the form responds in BOTH the main and validation tabs
6. Check the validation log - both actions are recorded!

Introduction to Data Extraction

Data extraction allows you to capture specific data from web pages - prices, names, dates, descriptions, or any other information.

Extraction Overlay Features

With the extraction overlay active:

• Boxes highlight potential data sources
• Boxes scroll with page content perfectly
• Right-click any box to see extraction options
• Preview the exact data (white text or tooltip) that will be extracted
• If an index obscures the data, look in the validation tab or toggle the overlay

Try It: Extract Product Information

Practice extracting different elements:

1. Right-click on the product price above
2. You'll see extraction options:
   • direct-text - Just the text content ("$299.99")
   • text - All text including children
   • numeric - Convert to number (299.99)
   • attribute values - Like data-price, id, class, herf, etc.
3. Select direct-text or numeric
4. The extractable value appears in white or in a tooltip if truncated
5. Check the validation log - you'll see the extracted value. Real-time validation!

Extraction Options Explained

Text Extraction Types:

• direct-text - Only the immediate text of the element (best for clean extraction)
• text - All text content including child elements
• numeric conversion - Automatically parse numbers from text

Attribute Extraction:

You can also extract attribute values from elements:

• href from links
• src from images
• data-* custom attributes
• class, id, or any other attribute

Parent Element Extraction:

Sometimes the data you want is in a parent element. You can extract text from:

• Parent element
• Grandparent element
• Great-grandparent element

Example use case: Merging multiple paragraph elements into a single output by extracting from their common parent container.

Try It: Grandparent Text Extraction

Try extracting this famous quote:

1. Right-click on any colored phrase in the quote above
2. Select direct-text - you'll only get that one phrase
3. Now right-click on the same phrase again
4. Select grandparent text - the text is truncated, so mouse over it to see the tooltip with the complete quote
5. Click to extract the full quote
6. Check the validation log to see the difference between the two extractions

Introduction to Array Extraction

Array extraction captures repeating data patterns - like tables, lists, search results, or product listings. Instead of extracting one item at a time, you can capture entire datasets in a single action.

Try It: Extract Product Listings

Extract the entire table:

1. With the array extraction overlay active, right-click on any product row or instance label (e.g. [3] 3/5)
2. The instance label has the array index in brackets then the instance index over the number of instances to help you identify which instances belong to which array
3. A menu appears allowing you to select which fields to extract (using the first complete instance as example data)
4. Choose the data fields you want (product name, price, rating, stock)
5. For price and rating, select numeric conversion
6. Click Extract Array
7. The array data is extracted from all matching instances!

Viewing Extracted Arrays

Array Extraction Use Cases

Common uses for array extraction:

• E-commerce: Product listings, price comparisons, review aggregation
• Job Hunting: Job board search results
• Real Estate: Property listings with prices, locations, features
• Research: Academic papers, citations, data tables
• Finance: Transaction histories, stock prices, portfolio holdings, invoices
• Travel: Flight options, hotel rates, rental car availability

Advanced Array Features

Scrolling Arrays

webSlinger can handle arrays that require scrolling to load more results. Just scroll until you see the end of the array, then toggle the array overlay and extract. In automations, webSlinger will copy this behavior and scroll to the end before extracting the array.

Nested Data

You can extract complex nested structures - for example, product listings where each product has multiple images, multiple price tiers, or multiple attribute options.

Column Selection

Choose exactly which columns you want - you don't have to extract every field. This keeps your data clean and focused on what you actually need.

What is a Session Map?

A session map is a complete record of everything you did during a webSlinger session. It captures:

• Navigation actions: All clicks and page transitions
• Input actions: Form fills, searches, selections
• Extraction actions: Single-item and array extractions
• Page states: State signatures for each page visited
• Action chains: The sequence of actions between anchor states
• Transitions: How pages change in response to actions
• Extracted data: Sample data captured during the session

Why Save Session Maps?

Benefits:

• Reuse the same workflow with different data
• Combine multiple session maps into complex automations
• Edit and refine your automation logic
• Version control your automation processes

How to Save a Session Map

1. Click the Save button on the webSlinger overlay (in the main tab)
2. Enter a descriptive name for your session map
   • Example: "weather-lookup-by-city"
   • Example: "amazon-price-check"
   • Example: "bank-statement-download"
3. Click Save to confirm
4. Your session map is saved to the webSlinger server

Try It Now

Since you've navigated through this tutorial and practiced input, extraction, and array extraction actions, you have a complete session map ready to save!

Deactivating webSlinger

Once you've saved your session map, you can deactivate webSlinger:

1. Click the webSlinger icon in your browser toolbar (it should be green/active)
2. The validation and copy tabs will close automatically
3. The main tab overlay disappears
4. The main tab becomes a normal browser tab again

What Gets Saved?

Your session map includes:

• Input data you provided
• Anchor states
• Complete action sequences
• Robust selectors for every element you interacted with
• Page state signatures (collected for research into improved state validation algorithms)
• Any data you extracted during the session (labeled as sample data)
• Scroll positions
• Action validation results

What You've Learned

Full Workflow Reference

The tutorial above covers the mechanics of recording. To learn about the complete workflow -- writing tasks and goals, generating scripts, configuring input data, running automations, and troubleshooting -- see the How-To Reference.

1. Weather Data Collection Tutorial

Watch this video tutorial that covers the complete automation workflow from start to finish:

• Planning sessions with tasks and goals
• Recording session maps for automation
• Generating automation scripts from session maps
• Creating input data files
• Running automations and reviewing results

2. Amazon Invoice Tutorial Video

Watch this step-by-step tutorial showing how to extract invoice data from Amazon order history using webSlinger:

3. Bank Login with MFA Tutorial

Learn how to automate logins that require credentials and Multi-Factor Authentication:

• Using keyCocoon for secure credential management
• Recording a password login with webSlinger
• Handling TOTP (authenticator app) verification codes
• Navigating post-login pages to reach your target data

4. Try a Real Automation

Ready to automate something real? Check out the Tutorial Library in the Automation tab for ready-to-run automation scripts. Just download and customize the inputData template. Then launch the automation.

Or pick a simple, repetitive task you do regularly and automate it on your own:

5. Explore Advanced Features

Once you're comfortable with the basics, explore more advanced capabilities:

• Array Extraction: Extract entire arrays with just a few clicks
• keyCocoon Integration: Secure credential management for automated logins
• Multi-Factor Authentication: Handle multi-factor authentication
• Dual Tab Workflows: Coordinate actions across multiple tabs
• Advanced Generalization: Provide a few examples and watch webSlinger generalize to complete workflows
• Scheduling: Run automations automatically on a schedule

Need Help?

Resources available to you:

• Documentation: Detailed guides on every feature
• Video Tutorials: Step-by-step walkthroughs
• Support: Send us feedback if you get stuck