Selectors

Selecting Elements on a page

In order to perform an action (click, hover, type, etc.) on a element on a website we need to first uniquely identify the element. This is where selectors can help us. Follow the example below. (I'm going to use Google Chrome as the browser in my example, but most of the popular modern browsers have these capabilities)

1. Open a browser and navigate to the test website: http://www.globalsqa.com/samplepagetest/

2. Let's try and find the unique identifier for the "Name" textbox. We can do this by right clicking inside the textbox and selecting "Inspect". This will pull up Chrome's DevTools which allows you to see the code behind the application.

3. From here we can see that the name field can be identified using the id "g2599-name"

4. Lets create a selector in the automation code by adding the following line to the test function

const nameField = Selector('#g2599-name');

Using other Selectors

In the previous situation an id was the CSS selector so a hash/number sign (#) was used before the id name. If a class was chosen a period (.) would be used before the class name.

const selectorForId = Selector('#idname');
const selectorForClass = Selector('.classname');

You can use other selectors using the following syntax

Selector('[selector="selectorName"]')

Let's try an example of this.

1. Navigate to our example page again and "Inspect" the email textbox
2. We can see that the name attribute is unique so let's create a selector for that. Add the following line under previous selector.

const emailField = Selector('[name="g2599-email"]')

More selectors

You can also create selectors that finds the element based on all of the classnames and the HTML tag.

Selector('htmltag.classname1.classname2.classname3')

Let's try this pattern using our example

1. Navigate to the example page again and "Inspect" the "Submit" button
2. In the DOM, Right click on the line that the button is on and hover over "Copy" then click on "Copy selector"
3. Paste into a text editor and your should see #contact-form-2599 > form > p.contact-submit > input.pushbutton-wide
4. We just need the last part of the selector after the last >
5. In the simple-test.js file, add the following selector to the test function

const submitButton = Selector('input.pushbutton-wide')

Selectors for DropDowns

DropDrowns are tricky, the most frequent use case is to click the dropdown and make a selection. Let's create the selectors for the dropdown.

1. Navigate to the example page again and "Inspect" the "Experience (In Years)" dropdown
2. Create a selector for the dropdown itself

const experienceSelect = Selector('#g2599-experienceinyears')

3. Now let's create a selector for the different options using the previous selector. In the devtools you can expand the <select> line to see the options.

const experienceOption = experienceSelect.find('option')

Finishing up

There is one last required part of the form that we did not complete. Use what you've learned in the last few exercises to create a selector for the comment box. The next section will give you the answer but try to refrain from looking at it.

Contents of simple-test.js

If you've been following along, the simple-test.js file should now look like this. Your comment selector might look different based on what method you used to make the selection.

const { Selector } = require('testcafe');

fixture`First Test`

test('First test - Visit Website', async function(t){
    const nameField = Selector('#g2599-name');
    const emailField = Selector('[name="g2599-email"]');
    const submitButton = Selector('input.pushbutton-wide');
    const experienceSelect = Selector('#g2599-experienceinyears');
    const experienceOption = experienceSelect.find('option');
    const commentBox = Selector('#contact-form-comment-g2599-comment');

    await t.navigateTo('http://www.globalsqa.com/samplepagetest/')
});