Selenium to test Dygraphs

Question

Is it possible to use selenium(C# bindings) to write automated tests for testing Dygraph charts? If selenium does not support this? Are there any other tools which can be used? http://dygraphs.com/

Greatly appreciate any advice in this regard.

Answer 1

Indeed, JS graphics libraries create a very complex DOM which makes difficult to verify behavior of the result - and Selenium is not properly focused on visual testing as well, which is a very important part of graphics.

For the functional problem, you can focus on unit testing, using something like Jest.

const chart = require('./chart');

test('chart has no labels', () => {
  expect(chart.createChart().getLabels()).toBe(null);
});

And for the visual testing, you can use something like Percy, which will create baselines images of the rendered page on the first execution of a test and compare it to the results from subsequent executions.

Below you can find an Ember test with Percy integrated, where multiple snapshots are captured to be used in the future for comparison.

test('add todos', async function(assert) {
    await visit('/');

    await percySnapshot('Empty todo list');

    await fillIn('#new-todo', 'Bake a cake');
    await triggerKeyEvent('#new-todo', 'keydown', 13);

    await fillIn('#new-todo', 'Rake the lawn');
    await triggerKeyEvent('#new-todo', 'keydown', 13);

    await assert.equal(currentURL(), '/');
    await assert.equal(find('ul.todo-list li:first-child').innerText.trim(), 'Bake a cake');
    await assert.equal(find('ul.todo-list li:last-child').innerText.trim(), 'Rake the lawn');

    await percySnapshot('Todo list with 2 todos');
  });
});