ConnectHTML: Examples

ConnectHTML is commonly used alongside WebView.

Using ConnectHTML with WebView

Various functions of ConnectHTML can be used with a WebView element.

GuiXT

WebView (1,1) (16,120) "http://www.example.com" name="ctrl"

ConnectHTML name="ctrl" -showNames

ConnectHTML getUrl="url" name="ctrl"

Text (17,1) "url: &V[url]"

ConnectHTML getTitle="title" name="ctrl"

Text (18,1) "title: &V[title]"

ConnectHTML zoomFactor="0.8" name="ctrl"

ConnectHTML name="ctrl" listElements="elem"

Text (19,1) "elem: &Text[elem]"

ConnectHTML name="ctrl" item="div" toText="div"

Text (20,1) "div: &Text[div]"

Set Text[text] "Lorem ipsum dolor sit amet"

Option: showNames

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView to use with ConnectHTML
WebView (1.3,16) (26.8,87.3) _ 
  "https://www.google.com" _ 
  name="web"
// Using the -showNames option
// Allows hovering over elements to see their names
ConnectHTML name="web" -showNames

Option: click=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView and navigate to Google
WebView (2,28.2) (16.9,91.3) "http://google.com" name="web"
// Create a Pushbutton that triggers click_test
Pushbutton (18,54) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Click the button named 'link' on the page
ConnectHTML click="link" name="web"
Return

Option: getUrl=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView and navigate to Google
WebView (2,28.2) (16.9,91.3) "http://google.com" name="web"
// Create a Pushbutton that triggers click_test
Pushbutton (18,54) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Fetch the current URL and store it in the variable 'url'
ConnectHTML getUrl="url" name="web"
// Display the fetched URL in a message
Message "&V[url]"
Return

Option: setUrl=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView and navigate to Google
WebView (2,28.2) (16.9,91.3) "http://google.com" name="web"
// Create a Pushbutton that triggers click_test
Pushbutton (18,54) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Change the displayed website in the WebView
ConnectHTML setUrl="https://synactive.com" name="web"
Return

Option: getTitle=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView and navigate to Google
WebView (2,28.2) (16.9,91.3) "http://google.com" name="web"
// Create a Pushbutton that triggers click_test
Pushbutton (18,54) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Fetch the website title
ConnectHTML getTitle="title" name="web"
// Display the title in a message
Message &V[title]
Return

Option: setTitle=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView and navigate to Google
WebView (2,28.2) (16.9,91.3) "http://google.com" name="web"
// Create a Pushbutton that triggers click_test
Pushbutton (18,54) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Update the title of the current website in the WebView
ConnectHTML setTitle="NewTitle" name="web"
// Fetch the updated title
ConnectHTML getTitle="title" name="web"
// Display the updated title in a message
Message &V[title]
Return

Option: listElements=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView and navigate to Google
WebView (4.6,40.9) (19.5,104) "http://google.com" name="web"
// Create a Textbox to store page elements
TextBox (20.2,43.4) (24.8,88.8) name="page_elements_box"
// Create a Pushbutton that triggers click_test
Pushbutton (22,92) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Populate the TextBox with all elements from the page
ConnectHTML listElements="page_elements_box"
Return

Option: wait=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView and navigate to Google
WebView (2,28.2) (16.9,91.3) "http://google.com" name="web"
// Create a Pushbutton that triggers click_test
Pushbutton (18,54) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Wait for a specified duration before setting the URL
// Duration is in milliseconds
ConnectHTML name="web" _ 
  setURL="https://www.synactive.com" _ 
  wait="500"
Return

Option: -pressEnter

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView and navigate to Google Maps
WebView (4.3,44.1) (19.2,107.2) _
  "http://www.google.com/maps/@44.0328318,12.4534589,11.54z" _
  name="web" _
  zoomFactor="0.75"
// Create a Pushbutton that triggers click_test
Pushbutton (20,72) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Set the search text using the 'text_q' element
// 'text_q' can be identified using -showNames or -listElements
Set HTML[text_q] "Rome"
// Confirm the search by pressing Enter on the page
ConnectHTML name="web" -pressEnter
Return

Option: -closeWindow

GuiXT

// Clears the screen
del (0,0) (20,200)
// Sets our variable closed if doesn't exist already
if not V[closed]
  Set V[closed] ""
endif
// Only creates our webview if closed isn't X
if not V[closed=X]
  WebView (4.3,44.1) (19.2,107.2) "http://www.google.com/?hl=en" name="web"
endif
// Create a Pushbutton that triggers click_test
Pushbutton (20,70) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Closes our "web" webview window
ConnectHTML name="web" -closeWindow
// Sets closed to "X" to stop the recreation of the webview
Set V[closed] "X"
Return

Option: run=, runResult=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView and navigate to Google
WebView (4.3,44.1) (19.2,107.2) "http://www.google.com" _
name="web"
// Create a Pushbutton that triggers the click_test process
Pushbutton (20,70) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Copy text from the file 'test.js' into the variable 'code'
CopyText fromFile="test.js" toText="code"
// Execute the JavaScript code stored in 'code' 
// and store the output in 'result'
ConnectHTML name="web" run="code" runResult="result"
// Display the resulting message
Message "Result: &text[result]"
Return

JavaScript (test.js)

// Get the HTML element with the ID "gb"
let e = document.getElementById("gb");
// Select the first "a" element inside it
const a = e.querySelector("a");
// Return the text content of that element
a.innerText;

Option: setHTMLFromText=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView with a blank html webpage
WebView (7.7,45.2) (17.6,108.2) "about:blank" _
  name="web" -transparent
// Create a Pushbutton that triggers the click_test process
Pushbutton (20,70) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Set the title variable
Set V[mytitle] "Sales Figures Canada"
// Build the HTML content using the title variable (HTML tags escaped)
Set text[html] "<h1 style='color:blue;'>&V[mytitle]</h1>"
// Display the HTML content in the WebView
ConnectHTML name="web" setHTMLfromText="html"

Option: visible=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Initialize the toggle variable if it is not already set
if V[toggle]
  // Set toggle to "X"
  Set V[toggle] "X"
  // Create a WebView and navigate to Google
  WebView (4.3,44.1) (19.2,107.2) "http://www.google.com" name="web"
endif
// Create a Pushbutton to trigger the click_test process
Pushbutton (20,70) "Click me!" process="click_test.txt"

GuiXT (click_test)

if V[toggle=X]
  // If toggle is "X", hide the WebView
  ConnectHTML name="web" visible="off"
  // Reset toggle to empty
  Set V[toggle] ""
else
  // If toggle is not "X", show the WebView
  ConnectHTML name="web" visible="on"
  // Set toggle to "X"
  Set V[toggle] "X"
endif
Return

Option: item=, checkItem=, toText=, fromText=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView and navigate to Google
WebView (4.3,44.1) (19.2,107.2) "http://www.google.com" _
name="web"
// Create a Pushbutton that triggers the click_test process
Pushbutton (20,70) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Check if the item 'textarea_q' exists on the page
ConnectHTML name="web" checkItem="textarea_q"
// Use Q[ok] to verify if the check was successful
if Q[ok]
  // Set the search text in the 'search' variable
  Set V[search] "synactive"
  // Convert the string into a text variable
  CopyText fromString="search" toText="text"
  // Insert the text from the 'text' variable into 'textarea_q'
  ConnectHTML name="web" item="textarea_q" fromText="text"
  // Retrieve the inserted text back into a new text variable 'searchtext'
  ConnectHTML name="web" item="textarea_q" toText="searchtext" _
    wait="250"
  // Convert the text variable back into a string
  CopyText fromText="searchtext" toString="result"
  // Display the result, which should match the original search text
  Message "Result: &V[result]"
endif
Return

Option: capturePreview=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Initialize imgPath if it is not yet set
if not V[imgPath]
  // Set imgPath to the default image (white.res)
  Set V[imgPath] "white.res"
endif
// Create a WebView and navigate to Google
WebView (3.5,46.4) (18.4,109.5) "http://www.google.com" name="web"
// Create an Image using the imgPath variable
// The -nobuffer option ensures the image is always refreshed
Image (3.5,112.2) (18.1,179.2) "&V[imgPath]" -nobuffer
// Create a Pushbutton to trigger the click_test process
Pushbutton (20,70) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Capture a screenshot of the WebView and save it to the Temp folder
ConnectHTML name="testview" capturePreview="C:\Temp\picture.png"
// Update the global variable imgPath with the saved image path
Set V[imgPath] "C:\Temp\picture.png"
Return

Option: callDevTools=, jsonInput=, jsonOutput=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView and navigate to Google
WebView (4.3,44.1) (19.2,107.2) "http://www.google.com" _
name="web"
// Create a Pushbutton to trigger the click_test process
Pushbutton (20,70) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Define parameters in JSON format for the DevTools call
// depth = 0 limits the call to the root DOM node
// pierce = true includes Shadow DOM and iframes
Set text[chrome_params] _ 
  "{""depth"": 0,""pierce"": true}"
// Call DOM.getDocument using callDevTools
// jsonInput provides the parameters
// jsonOutput stores the result in the 'out' text variable
ConnectHTML name="web" callDevTools="DOM.getDocument" _
        jsonInput="chrome_params" _
        jsonOutput="out"
// Convert the output text variable to a string for display
CopyText fromText="out" toString="msg"
// Display the resulting string
Message "Output: &V[msg]"
Return

Option: zoomFactor=

GuiXT

// Clear the screen
del (0,0) (20,200)
// Create a WebView and navigate to Google
WebView (3.5,46.4) (18.4,109.5) "http://www.google.com" name="web"
// Create an InputField to enter the desired zoom level
InputField (20,82) "Zoom:" (20,88) size=8 name="zoomlevel" -numerical
// Set the default zoom level to 1 (100% zoom)
Set V[zoomlevel] "1"
// Create a Pushbutton to trigger the click_test process
Pushbutton (20,70) "Click me!" process="click_test.txt"

GuiXT (click_test)

// Apply the zoom level from the input field to the WebView
ConnectHTML name="web" zoomFactor="&V[zoomlevel]"
Return