_javascript

Example

Our example application is available here on the-internet. It has a few avatars displayed in a grid layout. When you hover over each of them, they display additional user information and a link to view a full profile.

We're going to write a test that will hover over the first avatar and make sure that this additional information appears.

First we'll include our requisite libraries, declare the test class, and wire up some simple setup and teardown methods.

// filename: test/hovers.spec.js
const assert = require("assert");
const { Builder, By, Key } = require("selenium-webdriver");

describe("Hovers", function() {
  let driver;

  beforeEach(async function() {
    this.timeout(60000)
    driver = await new Builder().forBrowser("firefox").build();
  });

  afterEach(async function() {
    await driver.quit();
  });
// ...

Now let's write our test.

// filename: test/hovers.spec.js
// ...
  it("displays caption on hover", async function() {
    await driver.get("http://the-internet.herokuapp.com/hovers");
    const avatar = await driver.findElement(By.css(".figure"));
    await driver
      .actions({ bridge: true })
      .move({ origin: avatar })
      .perform();
    const caption = await driver.findElement(By.css(".figcaption"));
    assert(caption.isDisplayed());
  });
});

After loading the page we find the first avatar and store it in a variable (avatar). We then use the .move function and feed it the avatar variable (which triggers the hover).

We then check to see if the additional user information is displayed with .isDisplayed in our assertion.

Expected Behavior

When we save this file and run it (e.g., mocha from the command-line) here is what will happen:

• Open the browser
• Visit the page
• Hover over the first avatar
• Assert that the caption appeared on the page
• Close the browser

Summary

Hopefully this will help you handle more complex user interactions like hovers.

Happy Testing!