Filling forms and verifying their functionality is one of the major use cases in E2E-Testing and -Monitoring. Most of the web elements have been abstracted from their technical specification in HTML. An <intput name="last-name" /> for example is abstracted as a _textbox("last-name") accessor. Let’s have a look at the most common accessors to interact with forms.
Filling text into a textarea can easily be achieved by combining the _setValue() action with the _textarea() accessor.
<textarea name="textarea-input" ></textarea>await _setValue(_textarea('textarea-input'), 'Some longer text maybe...')
Similar to <textarea> elements, text input fields can easily be filled with text by combining the _setValue() action with the _textbox() accessor. The _textbox() accessor is configured to catch <input> fields without any type or with type=text.
<input type="text" name="first-name" />
<input name="last-name" />
<input id="Street" />await _setValue(_textbox('first-name') ,"Bill")
await _setValue(_textbox('last-name') ,"Jobs")
await _setValue(_textbox('street') ,"Money Blvd.")
Similar to <input type="text"> elements, E-Mail input fields can easily be filled with an E-Mail address by combining the _setValue() action with the _emailbox() accessor. The _emailbox() accessor is configured to catch <input> fields or with type=email.
<input type="email" name="mail-input" />await _setValue(_emailbox('mail-input'), 'do-not-spam@sakuli.io')
Password fields are a little different compared to standard input fields as they are hiding the provided input. Sakuli provides a _password() accessor to access <input> fields with type=password. In combination with the _setValue() action, it is easily possible to set passwords in those fields.
<input type="password" name="password-input" />await _setValue(_password('password-input'), "$ecret")
Just like other elements, Sakuli provides a _button accessor. The difference to e.g. input fields is the action you perform on button elements. Instead of setting a text value, you would rather click the button. To do so, Sakuli provides a _click action.
<button>Click Me</button>await _click(_button('Click Me'));
Submit buttons are the standard HTML way of submitting web forms. Those buttons provide specialized functionality and markup. Therefore Sakuli provides a dedicated _submit accessor looking for <input> elements with type="submit". Such an accessor decorated with a _click action will submit the respective web form associated with the submit button.
<form>
<label>User: <input type="text" name="username" /></label>
<label>Password: <input type="password" name="password" /></label>
<button type="submit">Login</button>
</form>await _click(_submit('Login'));
A special kind of buttons is the image submit button that is not displayed as a regular button but represented by an image. These buttons can be accessed by the _imageSubmitButton accessor which searches for <input> elements with type="image". As these elements are still meant to be clicked, a decoration with a _click action is possible.
<form>
<label>User: <input type="text" name="username" /></label>
<label>Password: <input type="password" name="password" /></label>
<input type="image" src="cool-button.png" name="login" />
</form>await _click(_imageSubmitButton('login'));
As for many other HTML elements, Sakuli provides a dedicated accessor and action to handle checkbox inputs. By using the _checkbox selector and decorating it with a _check action you are able to check any checkbox on your website.
<label>
<input type="checkbox" name="like-pizza">
<span>Like Pizza?</span>
</label>await _check(_checkbox('like-pizza'));
Selecting a specific value in select boxes is easy using the common accessor/action combination in Sakuli. To access the select box, use the _select accessor in combination with the _setSelected action. The _select accessor is built to fetch <select> elements from the given DOM.
<select name="preferred-drink">
<option value="water">Water</option>
<option value="wine">Wine</option>
<option value="beer">Beer</option>
</select>await _setSelected(_select('preferred-drink'), 'beer');
Similar to select boxes, radio buttons come with their own _radio accessor but reuse the _click action. The _radio accessor is looking for <input> fields with type=radio.
<h2>Prefered Drink?</h2>
<label>
<span>Water</span>
<input type="radio" name="drink" value="water" />
</label>
<label>
<span>Wine</span>
<input type="radio" name="drink" value="wine" />
</label>
<label>
<span>Beer</span>
<input type="radio" name="drink" value="beer" />
</label> await _click(_radio(1)); // Selects 'Wine'
In some cases it might be necessary to use XPath expression to navigate the DOM structure because you might use custom HTML elements or your elements do not match the criteria of Sakuli accessors. As the _byXPath accessor is just an accessor as every other, it is possible to combine it with actions.
<h2>Prefered Drink?</h2>
<label>
<span>Water</span>
<input type="radio" name="drink" value="water" />
</label>
<label>
<span>Wine</span>
<input type="radio" name="drink" value="wine" />
</label>
<label>
<span>Beer</span>
<input type="radio" name="drink" value="beer" />
</label> await _click(_byXPath("/html/body/label[2]/span")); // Selects 'Wine'