Script Examples

Script Examples #

Locating elements by using CSS selectors #

client.useCss();

This command sets element locator strategy to CSS. CSS is also the default strategy used by Nightwatch.

client => {
    // Example of locating elements using CSS selectors
    client
        // Navigate to website google.com
        .url('https://www.google.com')
        // Wait up to 10 seconds until 'body' element is visible and take a screenshot
        .waitForElementVisible('body', 10 * 1000)
        .takeScreenshot('website_google.png')
        // Type "Loadero" in the search bar
        .setValue('input[type=text]', 'Loadero')
        // Trigger search by sending "Enter" key event in the search bar
        .setValue('input[type=text]', client.Keys.ENTER)
        // Wait up to 10 seconds until search results are visible and take a screenshot
        .waitForElementVisible('div#rso', 10 * 1000)
        .takeScreenshot('loadero_search_results.png');
}

Locating elements by using xPath selectors #

client.useXpath();

Sets the locate strategy for selectors to XPath. It is possible to use both XPath and CSS strategies by switching back and forth.

client => {
    // Example of locating elements using xPath selectors
    client
        .useXpath()
        // Navigate to Google website
        .url('https://www.google.com')
        // Wait up to 10 seconds until '//body' element is visible and take a screenshot
        .waitForElementVisible('//body', 10 * 1000)
        .takeScreenshot('website_google.png')
        // Type "charizard evolution chart" in the search bar
        .setValue('//input[@type="text"]', 'Loadero')
        // Trigger search by sending 'Enter' key event in the search bar
        .setValue('//input[@type="text"]', client.Keys.ENTER)
        // Wait up to 10 seconds until search results are visible and take a screenshot
        .waitForElementVisible('//div[@id="rso"]', 10 * 1000)
        .takeScreenshot('loadero_search_results.png');
}

Using Nightwatch assertions #

Nightwatch native assertions are called by two methods, depending on the expected result after error is asserted: .assert and .verify

Once this assertion fails, test is ended and any assertions further in the script are skipped:

client.assert.visible(".non-existing-element-class");

This assertion will log the failure and script execution continues on.

client.verify.visible(".non-existing-element-class");

client => {
    // Example of using Nightwatch assertions
    client
        .url('https://www.testdevlab.com')
        .waitForElementVisible('body', 10 * 1000)
        // Check if the page url contains given value, otherwise stop the test
        .assert.urlEquals('https://www.testdevlab.com/')
        // Verify if the page title contains given value, otherwise log error
        .verify.title(
            'We are experts in Software Quality Assurance. - TestDevLab'
        )
        // Take screenshot of website
        .takeScreenshot('website_testdevlab.png')
        // Check if the "Company" element is visible
        // Wait up to defined timeout for "Company" element to be visible
        .waitForElementVisible('.sections div:nth-child(4).sub-menu', 10 * 1000)
        .click('.sections div:nth-child(4).sub-menu')
        // Check if the element is visible
        // Wait up to defined timeout for "Careers" to be visible
        .waitForElementVisible('a[href^="/careers"]', 10 * 1000)
        .click('a[href^="/careers"]')
        .getLocationInView('.container .job-position-intro:nth-child(3)', () => { })
        // Check if career position is visible, otherwise log error
        .verify.visible('.container .job-position-intro:nth-child(3)')
        .takeScreenshot('testdevlab_career_positions.png');
}