如何使用Protractor（TypeScript）验证网页图表及悬浮提示？

Got it, let’s walk through exactly how to validate web charts and their hover tooltips using Protractor with TypeScript. I’ve tackled this countless times for dashboard UIs, so this approach is tried and tested.

Prerequisites First #

Before diving in, make sure:

• Your Protractor setup is fully configured for TypeScript (with tsconfig.json set up correctly)
• You understand how your target chart is rendered (e.g., D3.js, Chart.js, or a custom SVG/Canvas implementation—this affects how you locate elements)
• You’ve added protractor and @types/protractor as dependencies in your project

Step 1: Locate & Wait for the Chart to Load #

Charts often load asynchronously (fetching data from APIs, rendering dynamically), so never skip waiting for the chart to be present before interacting.

For an SVG-based chart (like D3):

const salesChart = element(by.css('svg#monthly-sales-chart'));
await browser.wait(ExpectedConditions.presenceOf(salesChart), 10000, 'Chart failed to load within 10 seconds');

For a Canvas-based chart (like Chart.js):

const revenueChart = element(by.css('canvas#revenue-trend'));
await browser.wait(ExpectedConditions.presenceOf(revenueChart), 10000);

Step 2: Basic Chart Validation (Structure & Static Content) #

First, verify the chart’s core components are present and correct:

• Check axis labels:

  expect(await element(by.css('.x-axis-label')).getText()).toBe('Months');
  expect(await element(by.css('.y-axis-label')).getText()).toBe('Revenue ($)');
  

• Validate the number of data points (for SVG charts):

  const chartBars = salesChart.all(by.css('rect.bar'));
  expect(await chartBars.count()).toEqual(12); // 12 months of data
  

• For Canvas charts, you can’t inspect internal elements directly—so focus on tooltip validation (more on that next) and any external legend text.

Step 3: Hover Over Data Points & Validate Tooltips #

This is the trickier part, but breaking it down makes it simple:

3.1 Locate the Target Data Point #

For SVG charts, target a specific bar/point directly:

const firstMonthBar = salesChart.element(by.css('rect.bar:nth-child(1)'));

For Canvas charts, since you can’t select internal elements, use coordinates relative to the canvas:

// Hover 50px from the left and 100px from the top of the canvas
await browser.actions().mouseMove(revenueChart, {x: 50, y: 100}).perform();

3.2 Trigger the Hover & Wait for the Tooltip #

Simulate a mouse hover, then wait for the tooltip to become visible:

// Trigger hover on the data point
await browser.actions().mouseMove(firstMonthBar).perform();

// Wait for tooltip to appear
const salesTooltip = element(by.css('.chart-tooltip'));
await browser.wait(ExpectedConditions.visibilityOf(salesTooltip), 5000, 'Tooltip failed to appear on hover');

3.3 Validate Tooltip Content #

Check that the tooltip shows the correct data (title, values, labels):

expect(await salesTooltip.element(by.css('.tooltip-title')).getText()).toBe('January 2024');
expect(await salesTooltip.element(by.css('.tooltip-value')).getText()).toContain('$14,800');
expect(await salesTooltip.element(by.css('.tooltip-change')).getText()).toBe('+12% YoY');

Step 4: Edge Cases & Best Practices #

• Avoid hard sleeps: Always use ExpectedConditions instead of browser.sleep()—it makes tests more reliable.
• Loop through multiple data points: For full coverage, iterate over all bars/points and validate each tooltip:

  const allBars = salesChart.all(by.css('rect.bar'));
  const expectedMonths = ['January', 'February', ..., 'December'];
  
  for (let i = 0; i < await allBars.count(); i++) {
    const bar = allBars.get(i);
    await browser.actions().mouseMove(bar).perform();
    const tooltip = element(by.css('.chart-tooltip'));
    await browser.wait(ExpectedConditions.visibilityOf(tooltip), 5000);
    expect(await tooltip.element(by.css('.tooltip-title')).getText()).toBe(expectedMonths[i]);
  }
  

• Handle dynamic tooltip positioning: Tooltips might shift based on screen size—use class-based selectors instead of positional ones (e.g., .chart-tooltip instead of div[style="top: 100px; left: 200px"]).
• Canvas chart workarounds: If you need to validate chart visuals (not just tooltips), consider using tools like canvas-to-buffer to compare pixel data, but this is more advanced. For most UI validation, tooltip checks are sufficient.

内容的提问来源于stack exchange，提问作者Priyadharshni Mahalingam