Chart.js и другие библиотеки

Chart.js — одна из самых популярных JavaScript-библиотек для построения интерактивных графиков и диаграмм. Веб-разработчики часто используют её для отображения данных в удобной и визуально привлекательной форме. С помощью Chart.js можно создавать линейные графики, гистограммы, круговые диаграммы, графики с областями и другие типы визуализаций. Важно понимать, как интегрировать эту библиотеку в автоматизированные тесты с использованием WebdriverIO.

Установка Chart.js

Для начала работы с Chart.js нужно установить саму библиотеку. Это можно сделать через менеджер пакетов npm:

npm install chart.js

После установки библиотеки, она доступна для использования в проекте. Важно также подключить её к HTML-странице:

<script src="node_modules/chart.js/dist/chart.min.js"></script>

Если используется сборщик модулей, то можно импортировать библиотеку следующим образом:

import Chart from 'chart.js';

Основы работы с Chart.js

После подключения библиотеки необходимо создать элемент <canvas>, в котором будет отображаться график.

<canvas id="myChart" width="400" height="400"></canvas>

Далее, в JavaScript, можно создать новый объект Chart:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // Тип графика
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Sales Data',
            data: [12, 19, 3, 5, 2, 3, 10],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

Этот код создаёт простую столбчатую диаграмму, отображающую данные по продажам для различных месяцев. Важно, что Chart.js предоставляет большое количество настроек для настройки внешнего вида графика, включая стили, цвета, шрифты и поведение.

Интеграция с WebdriverIO

При тестировании веб-приложений с использованием WebdriverIO необходимо проверить не только функциональность интерфейса, но и корректность отображения графиков. WebdriverIO предоставляет возможность взаимодействовать с элементами на странице, включая canvas. Однако, прямое взаимодействие с элементами на canvas сложнее, чем с обычными DOM-элементами. Чтобы протестировать графики, часто используют следующие подходы:

  1. Проверка наличия графика: На основе идентификаторов элементов можно проверить, был ли успешно добавлен график на страницу.
it('should display a chart', async () => {
    const chart = await $('#myChart');
    const isDisplayed = await chart.isDisplayed();
    assert.strictEqual(isDisplayed, true);
});
  1. Проверка значений данных на графике: С помощью WebdriverIO можно получить данные с графика и проверить их соответствие ожиданиям. Для этого потребуется использовать метод .execute(), чтобы выполнить JavaScript-код внутри браузера и получить значения из объекта графика.
it('should have correct chart data', async () => {
    const chartData = await browser.execute(() => {
        const chart = Chart.instances[0]; // Доступ к первому экземпляру графика
        return chart.data.datasets[0].data;
    });

    assert.deepStrictEqual(chartData, [12, 19, 3, 5, 2, 3, 10]);
});
  1. Проверка внешнего вида графика: Иногда необходимо убедиться, что график отображается в правильном стиле или что его элементы имеют ожидаемые размеры. Для этого можно использовать методы WebdriverIO, такие как .getSize(), чтобы проверить размеры canvas, и .getCssProperty() для проверки стилей:
it('should have the correct chart size', async () => {
    const chart = await $('#myChart');
    const size = await chart.getSize();
    assert.strictEqual(size.width, 400);
    assert.strictEqual(size.height, 400);
});

Важные моменты при тестировании графиков

При тестировании графиков, созданных с помощью Chart.js, стоит учитывать несколько аспектов:

  • Динамическая загрузка данных: Многие графики обновляются динамически с помощью данных, получаемых с сервера. В таких случаях важно убедиться, что тесты учитывают асинхронные операции, например, с помощью waitUntil или других методов ожидания от WebdriverIO.

  • Проверка визуальных изменений: Для тестирования визуальной части графиков можно использовать скриншотное тестирование. WebdriverIO предоставляет методы для создания снимков экрана страницы или отдельных её элементов:

it('should match the expected chart appearance', async () => {
    const chart = await $('#myChart');
    await chart.saveScreenshot('./chart-screenshot.png');
});

Эти изображения можно затем сравнивать с заранее подготовленными эталонными изображениями с помощью таких инструментов, как pixelmatch или jest-image-snapshot.

Альтернативы Chart.js

Помимо Chart.js, существует множество других библиотек для визуализации данных. Каждая из них имеет свои особенности и сферы применения:

  • D3.js — более сложная, но и более гибкая библиотека для создания визуализаций. D3.js позволяет манипулировать DOM и SVG-элементами, предоставляя высокий уровень контроля над визуализацией данных. Для интеграции с WebdriverIO в тестах можно использовать аналогичные подходы, как и с Chart.js, включая проверку значений и размеров элементов.

  • Highcharts — ещё одна популярная библиотека для построения интерактивных графиков. Highcharts предоставляет богатый функционал для создания графиков и диаграмм, поддерживает анимации и взаимодействие с пользователем. При тестировании Highcharts в WebdriverIO также можно использовать методы для проверки данных и визуального представления графиков.

  • Plotly.js — библиотека для создания научных и статистических графиков. В отличие от Chart.js и D3.js, Plotly.js имеет встроенную поддержку для создания сложных графиков и визуализаций данных. Она также поддерживает анимацию и интерактивные элементы, такие как панорамирование и масштабирование.

Каждая из этих библиотек может быть интегрирована с WebdriverIO для тестирования отображения данных, но выбор библиотеки зависит от конкретных требований к проекту, удобства работы и сложности визуализации.

Заключение

Тестирование графиков, построенных с использованием Chart.js или других библиотек, требует внимательного подхода к проверке данных и внешнего вида. WebdriverIO предоставляет все необходимые инструменты для автоматизации проверки этих элементов, включая методы для взаимодействия с DOM, выполнения JavaScript-кода внутри браузера и создания скриншотов. Несмотря на то что для тестирования графиков нужно учитывать особенности работы с canvas-элементами, подходы и методы остаются схожими с тестированием других элементов веб-страницы.

Оглавление