Interface FetchApi

example

Assume this HTML-snippet:

<ul>
    <li>entry</li>
    <li>entry</li>
</ul>

Test the equality of two elements:

// _listItem("entry") will fetch the first list item
const equal = await _areEqual(_listItem(0), _listItem("entry")) // -> true
const notEqual = await _areEqual(_listItem(1), _listItem("entry")) // -> false

example

Assume the following HTML-snippet:

<div id="parent">
    <div id="child-a"></div>
    <div id="child-b"></div>
</div>

Check if an element is the contained within another

await _contains(_div('parent'), _div('child-b')) // -> true
await _contains(_div('child-a'), _div('child-b')) // -> false

example

Assume the following HTML-snippet:

<div id="d1" style="background-color: yellow"><i>Formatted</i> Text</div>

Check if an element contains certain HTML:

await _containsHTML(_div(0), '<i>Formatted</i>'); // -> true
await _containsHTML(_div(0), 'Text'); // -> true
await _containsHTML(_div(0), '<i>Formatted</i> Text'); // -> true
await _containsHTML(_div(0), '<i>.*</i>'); // -> true
await _containsHTML(_div(0), 'Formatted Text'); // -> false
await _containsHTML(_div(0), 'Non existent'); // -> false

example

Assume following HTML-snippet:

<p ="intro">
Lorem ipsum dolor sit amet. consetetur sadipscing elitr
</p>
<!-- Inner HTML-tags are stripped -->
<div>Hello <i>World</i></div>
<div id="pending-request">
    There are 5 pending request
</div>

Check if a element contains certain text:

const containsIpsumDolor = await _containsText(_paragraph('intro'), 'ipsum dolor') // -> true
const containsYpsumDolor = await _containsText(_paragraph('intro'), 'ypsum dolor') // -> false

const containsText = await _containsText(_div(0), 'Hello World'); // -> true

const probablyDynamicText = await _containsText(_div('pending-request'), "There are . pending requests"); // -> true

example

Assume this HTML-snippet:

<div>Hello</div>

Determine if an element is present in the current DOM:

const present = await _exists(_div("Hello")); // -> true
const absent = await _exists(_div("World")); // -> false

example

Assume this HTML-snippet:

<div
    data-testid="foo-element"
    class="widget primary"
>Foo bar</div>

Accessing the values of div attributes:

const dataTestId = await _getAttribute(_div(/Foo bar/), 'data-testid'); // -> "foo-element"
const classNames = await _getAttribute(_div(/Foo bar/), 'class'); // -> "widget primary"

example

Assume this HTML-snippet:

<select name="answers">
    <option value="a-yes">Yes</option>
    <option value="a-no">No</option>
    <option value="a-maybe">Maybe</option>
</select>

Accessing either to displayed text or the actual values of the options:

const optionTexts = await _getOptions(_select('answers')); // -> ['Yes', 'No', 'Maybe']
const optionValues = await _getOptions(_select('answers'), "value"); // -> ['a-yes', 'a-no', 'a-maybe']

example

Assume this HTML-snippet:

<select name="answers">
    <option value="a-yes">Yes</option>
    <option value="a-no">No</option>
    <option selected="selected" value="a-maybe">Maybe</option>
    <!-- Selected attribute is also set if the user (or Sakuli) selects the option in the browser -->
</select>

Accessing either the displayed text or the actual value of the options:

const selectedOptionText = await _getSelected(_select('answers')); // -> 'a-maybe'

example

Assume this HTML-snippet:

<input type="text" name="with-value" value="Hello World" />
<div id="without-value"></div>

Accessing the value of [value]

const valueFromInput = await _getValue(_textbox('with-value')); // -> "Hello World"
const noValue = await _getValue(_div('without-value')); // -> undefined

example

Assume this HTML-snippet:

   <input type="radio" name="payment" value=debit-card" />
   <input type="radio" name="payment" value="cash" />

Checks if a radio input is checked or not:

const checked = await _isChecked(_radio(0)); // -> true
const notChecked = await _isChecked(_radio(1)); // -> false

example

Assume this HTML-snippet:

<input type="text" id="enabled-input" />
<input type="text" disabled id="disabled-input" />

Check if the inputs are enabled:

const enabled = await _isEnabled(_textbox('enabled-input')); // -> true
const disabled = await _isEnabled(_textbox('disabled-input')); // -> false

example

Assume this HTML-snippet:

<div>Hello World</div>
<div style="display: none">Ninja Element</div>

Testing the visibility of the elements:

const visible = await _isVisible(_div("Hello World")) // -> true
const invisible = await _isVisible(_div("Ninja Element")) // -> false

// Waits at most 5 seconds until element is visible

await _wait(5000, () => _isVisible(_div('Hello World')));

example

Assuming a modal overlay element at x: 300 and y: 400

const [x,y] = await _position(_div('modal')) // -> [300, 400];

Accessing the style directly as an attribute will not return a computed style. Always use _style instead.

Warning: A proper assertion will be difficult as some browser may interpret it differently.

example

Assuming the following document:

<!DOCTYPE html>
<html>
<head>
  <title>Tested with Sakuli</title>
</head>
<body>
</body>
</html>

Accessing the current Title of the element:

const title = await _title() // -> "Tested with Sakuli";