@dscribers/surf-me

Surf Me

The in-browser page runner.

Usage

1. Include the script on every page that needs to be tested.

<script href="https://cdn.jsdelivr.net/npm/@dscribers/surf-me@latest/dist/surf-me.min.js"></script>
<script>
  SurfMe(
    'https://example.com', // Allowed origin to communicate with web page. * means all/any origin.
    {
      // Configuration to be sent to the origin
    }
  )
</script>

2. Follow the instructions of the parent/origin app.

How it works

1. A main project creates a page with an iframe
2. A sub-project creates a page or pages with the above script
3. The main project loads the sub-project in the iframe
4. The main project sends commands to the iframe
5. SurfMe receives the commands and executes them on the iframe

Commands

The following commands are available for execution on the iframe page:

Method	Params	Description
checkAttrContains	(string) selector, (string) attribute, (string) text	Called to check if an element's attributes contains the given text
checkAttrIs	(string) selector, (string) attribute, (string) text	Called to check if an element's attribute is the same as the given text
checkExists	(string) selector	Called to check if an element exists on the page
checkIsOn	(string) url	Called to check if the page is on the given url
checkElementIs	(string) selector, (string) display	Called to check if an element is either visible or hidden
checkPageContains	(string) selector, (string) text	Called to check if the page contains the given text and the text is visible
checkTextContains	(string) selector, (string) text	Called to check if the element's text contains the given text
checkTextIs	(string) selector, (string) text	Called to check if element's text is matches the given text
checkValueContains	(string) selector, (string) text	Called to check if the element's value contains the given text
checkValueIs	(string) selector, (string) text	Called to check if the element's value matches the given text
doClick	(string) selector	Called to click on an element
doGoto	(string) url	Called to go to a url
doRefresh	-	Called to refresh the page
doSelect	(string) selector, (string) value	Called to select the given value in the given dropdown/select element.
doSet	(string) selector, (string) value	Called to set the given value into the element.
doSubmitForm	(string) selector	Called to submit the form with the given selector
doType	(string) selector, (string) str, (integer) speed	Called to type the given string in the given element at the given speed.

Example

  // page on https://example.com
  const action = 'doType';
  const params = ['#some-element-selector', 300]
  const iframeDomain = 'https://iframe-domain.com'

  iframe.contentWindow.postMessage({ action, params }, iframeDomain)

  // page on https://iframe-domain.com
  <script href="https://cdn.jsdelivr.net/npm/@dscribers/surf-me@latest/dist/surf-me.min.js"></script>
  <script>
    SurfMe('https://example.com')
  </script>