Browser

The Test Evolve browser is available if you have configured test_types in config.yml to include browser or selected the test_type browser in Flare.

Ruby

TestEvolve.browser

In Spark Ruby TestEvolve.browser is an instance of a Watir::Browser, which is a wrapper for Selenium webdriver. Comprehensive guides, docs, FAQs and examples are available from http://watir.com.

JavaScript

testEvolve.browser

TypeScript

testEvolve.browser

Type SparkBrowser imported from "@testevolve/testevolve-spark"

Driver

The underlying Selenium driver can be accessed in the following way.

Ruby

TestEvolve.browser.driver

JavaScript

testEvolve.browser.driver

TypeScript

testEvolve.browser.driver

Type ThenableWebDriver imported from "selenium-webdriver"

Comprehensive documentation is available from https://www.selenium.dev/documentation/webdriver.

Navigation

Navigate to URL

Ruby

TestEvolve.browser.goto('http://testevolve.com')

JavaScript

testEvolve.browser.goto('http://testevolve.com')

TypeScript

testEvolve.browser.goto('http://testevolve.com')

Navigate Back

Ruby

TestEvolve.browser.back

JavaScript

testEvolve.browser.back();

TypeScript

testEvolve.browser.back();

Navigate Forward

Ruby

TestEvolve.browser.forward

JavaScript

testEvolve.browser.forward();

TypeScript

testEvolve.browser.forward();

Refresh

Ruby

TestEvolve.browser.refresh

JavaScript

testEvolve.browser.refresh();

TypeScript

testEvolve.browser.refresh();

Elements

Locating Elements

Spark provides support for all valid html elements as methods on the browser object.

For example a div element can be located using browser.div and then providing an identifier for the element in the DOM. In cases where you do not want to specify the html element type you can simply use browser.element, but this is not recommended.

Some examples are listed below:

Ruby

div(id: 'unique-identifier')

button('data-test': 'unique-identifier')

a(class: 'unique-identifier')

p(css: '.unique-identifier');

h2(xpath: '//h2['unique-identifier']');

Returns an instance of a subclass of Watir::Element

JavaScript

div({ id: "unique-identifier" });

button({ "data-test": "unique-identifier" });

a({ class: "unique-identifier" });

p({ css: ".unique-identifier" });

h2({ xpath: "//h2['unique-identifier']" });

TypeScript

div({ id: "unique-identifier" });
// returns an instance of BrowserElement
button({ "data-test": "unique-identifier" });
// returns an instance of Button
a({ class: "unique-identifier" });
// returns an instance of Anchor
p({ css: ".unique-identifier" });
// returns an instance of BrowserElement
h2({ xpath: "//h2['unique-identifier']" });
// returns an instance of BrowserElement

All elements are instances of or subclasses of BrowserElement imported from "@testevolve/testevolve-spark"

You can chain element definitions to be more specific with your locators:

Ruby

div(id: 'unique-identifier').button('data-test': 'unique-identifier')

JavaScript

div({ id: "unique-identifier" }).button({ "data-test": "unique-identifier" });

TypeScript

div({ id: "unique-identifier" }).button({ "data-test": "unique-identifier" });

Type Button imported from "@testevolve/testevolve-spark"

You can supply multiple identifiers for a single element in the following way:

Ruby

button(id: 'unique-identifier', 'data-test': 'unique-identifier')

JavaScript

button({ id: "unique-identifier", "data-test": "unique-identifier" });

TypeScript

button({ id: "unique-identifier", "data-test": "unique-identifier" });

Type Button imported from "@testevolve/testevolve-spark"

Click

Ruby

element.click

JavaScript

await element.click();

TypeScript

await element.click();

Double Click

Ruby

element.double_click

JavaScript

await element.doubleClick();

TypeScript

await element.doubleClick();

Send Keys

Ruby

element.send_keys 'value'

JavaScript

await element.sendKeys("value");

TypeScript

await element.sendKeys("value");

Get Standard Attribute

Every standard attribute on an element is represented by a method on the Spark Element object.

Ruby

element.href

JavaScript

const element = a({ id: "unique-identifier" });
await element.href();

TypeScript

const element: Anchor = a({ id: "unique-identifier" });
await element.href();
// returns a String

Get Custom Attribute

Ruby

element.attribute_value('title')

JavaScript

await element.attribute("title");

TypeScript

await element.attribute("title");
// returns a String

Input - Text

An input with type text should be defined in the following way:

Ruby

TestEvolve.browser.text_field(id: "text-field-identifier")

JavaScript

testEvolve.browser.textField({ id: "text-field-identifier" });

TypeScript

testEvolve.browser.textField({ id: "text-field-identifier" });

Type TextField imported from "@testevolve/testevolve-spark"

Set Text

On a text input you can set the text of the input using set.

Ruby

element.set 'value'

JavaScript

await element.set("value");

TypeScript

await element.set("value");

Clear Text

On a text input you can clear the text in the input using clear.

Ruby

element.clear

JavaScript

await element.clear();

TypeScript

await element.clear();

Get Text

On a text input you can get the text in the input using value.

Ruby

element.value

JavaScript

await element.value();

TypeScript

await element.value();
// returns a String

Input - Radio

An input with type radio should be defined in the following way:

Ruby

TestEvolve.browser.radio(id: "option1")

JavaScript

testEvolve.browser.radio({ id: "option1" });

TypeScript

testEvolve.browser.radio({ id: "option1" });

Type Radio imported from "@testevolve/testevolve-spark"

Select an option

On radio input you can select the desired option using set.

Ruby

element.set

JavaScript

await element.set();

TypeScript

await element.set();

Get Radio option status

You can check if a radio option is selected in the following way:

Ruby

element.set?

JavaScript

await element.isSet();

TypeScript

await element.isSet();
// returns a boolean

This returns true or false depending on if the radio option is selected.

Input - Checkbox

An input with type checkbox should be defined in the following way:

Ruby

TestEvolve.browser.checkbox(id: "option1")

JavaScript

testEvolve.browser.checkbox({ id: "option1" });

TypeScript

testEvolve.browser.checkbox({ id: "option1" });

Type Checkbox imported from "@testevolve/testevolve-spark"

Check a Checkbox

You can check a checkbox input using check.

Ruby

element.check

JavaScript

await element.check();

TypeScript

await element.check();

Uncheck a Checkbox

You can uncheck a checkbox input using uncheck.

Ruby

element.uncheck

JavaScript

await element.uncheck();

TypeScript

await element.uncheck();

Get Checkbox status

You can see if a checkbox is checked in the following way:

Ruby

element.checked?

JavaScript

await element.isChecked();

TypeScript

await element.isChecked();
// returns a boolean

This returns true or false depending on if the checkbox is checked.

Select List

Ruby

TestEvolve.browser.select(id: "select-list-identifier")

JavaScript

testEvolve.browser.select({ id: "select-list-identifier" });

TypeScript

testEvolve.browser.select({ id: "select-list-identifier" });

Type Select imported from "@testevolve/testevolve-spark"

Select Option by value

On a Select List you can select a value in the following way:

Ruby

element.select('option1')

JavaScript

await element.selectValue("option1");

TypeScript

await element.selectValue("option1");

Get Selected Option value

You can retrieve the value of the currently selected option using value:

Ruby

element.value

JavaScript

await element.value();

TypeScript

await element.value();
// returns value as a String

Page Object

The Page Object model is commonly used in test automation frameworks because it reduces code duplication and improves test maintenance.

In Spark page object files are generally kept in features/support/pages.

The following is a basic page object template:

Ruby

module Pages
  def login_page
    @login_page ||= LoginPage.new
  end

class LoginPage < TestEvolve::Core::PageObject
  element(:standard_button) { button(data_test: 'standard-button') }

  def visit
    goto 'https://testevolve.io/login'
  end
end

An instance of the PageObject class can be referenced from any Step Definition file using login_page.

For example:

login_page.visit

JavaScript

import { PageObject } from "@testevolve/testevolve-spark";

class IndexPage extends PageObject {

  initialise() {
    this.standardButton = this.button({ "data-test": "standard-button" });
  };

  visit = async () => {
    await this.goto('https://testevolve.io/login');
  };
};

The PageObject class file should be exported in features/support/pages/index.js so it can then be imported and used in any Step Definition file as shown below:

export { default as indexPage } from './index.page';

import { indexPage } from "../support/pages/index";

await indexPage.visit();

TypeScript

import { PageObject, Button } from "@testevolve/testevolve-spark";

class IndexPage extends PageObject {
  standardButton: Button;

  initialise() {
    this.standardButton = this.button({ "data-test": "standard-button" });
  };

  visit = async () => {
    await this.goto('https://testevolve.io/login');
  };
};

The PageObject class file should be exported in features/support/pages/index.ts so it can then be imported and used in any Step Definition file as shown below:

export { default as indexPage } from './index.page';

import { indexPage } from "../support/pages/index";

await indexPage.visit();

An argument can be passed into the page object element definition at runtime in the following way:

Ruby

  element(:standard_button) { |button_number| button(data_test: "button-#{button_number}") }

  def click_standard_button
    standard_button('one').click
  end

JavaScript

  initialise() {
    this.standardButton = this.element(buttonNumber => ({ "data-test": `button-${buttonNumber}` }));
  };

  clickStandardButton = async () => {
    await this.standardButton("one").click();
  };

It's important to note that currently only the element function supports passing arguments in this way. You must use element rather than the other supported tags such as button and textField etc...

TypeScript

  standardButton: Button;

  initialise() {
    this.standardButton = this.element(buttonNumber => ({ "data-test": `button-${buttonNumber}` }));
  };

  clickStandardButton = async () => {
    await this.standardButton("one").click();
  };

Type BrowserElement imported from "@testevolve/testevolve-spark"

It's important to note that currently only the element function supports passing arguments in this way. You must use element rather than the other supported tags such as button and textField etc...