Testing the application

Page Object

Let’s explore the application component structure.

The page contains a polygraph component with six AxisLabel children. Next, define the Page Object based on this structure.

Since the form for adding a new stat is defined with a declarative approach, we use built-in TestCafe selectors.

For details about TestCafe selectors, see Selectors.

Stats painted on the graph are defined with a component-based approach, and we use VueSelector for them.

For more information about VueSelector, see testcafe-vue-selectors.

Create folder testcafe and save the Page Object definition to the page-object.js file. Later on, we will import this file as a regular module.

Test Scenario

Actions, assertions, and the file protocol

Let’s create the svg-test.js file and put it into the testcafe directory. TestCafe supports the file:// protocol, so you do not need to set up a local HTTP server to run the tests. All you need is specify the path to the tested page as a target page URL.

The test scenario adds a new stat labeled G and checks that the number of stats changed from 6 to 7.

This code uses methods that emulate user actions: typeText and click. You can find more details about actions in the Actions documentation topic.

We use built-in assertions to check that the HTML elements’ properties have the expected values. They expose various methods to compare values and provide the Smart Assertion Query Mechanism. For details on assertions, see Assertions.

Since VueSelector inherits from Selector , you can use all the capabilities of TestCafe selectors. For instance, the code above uses the count property from the Selector API.

Component state and properties

The testcafe-vue-selectors plugin also allows you to obtain Vue.js component properties. Extend the test above with code that verifies the added stat's properties: