新手求助：如何使用Protractor定位器测试含JQWidget表格的网页

Hey there! Since you're new to Protractor and working with JQWidget's table headers, let's walk through how to test both of those sorting behaviors—even when the inspector doesn't show the full element details right away.

1. Testing the Text Part (Cycle Sort Order) #

The text section of the column header cycles through sort modes when clicked. Here's how to approach this:

• Locate the text element: JQWidget headers usually have specific class names. For example, you might use a CSS selector targeting the text part of a specific column. If you know the column's label, an XPath works too:

  const columnText = element(by.xpath("//div[contains(@class, 'jqx-grid-column-header-text') and text()='Your Column Name']"));
  

• Perform the click & verify: Click the text element, then validate that the table data has sorted accordingly. Grab the values from the column before and after clicking to compare the order:

  // Get initial column values
  const initialValues = element.all(by.css('td.jqx-grid-cell:nth-child(2)')).getText();
  // Click the column text
  columnText.click();
  // Get sorted values
  const sortedValues = element.all(by.css('td.jqx-grid-cell:nth-child(2)')).getText();
  // Verify ascending/descending order (adjust logic based on expected cycle)
  expect(sortedValues).toEqual(initialValues.reverse());
  

2. Testing the Icon Part (Dropdown Sort Menu) #

The icon section opens a dropdown with explicit asc/desc options. Here's how to handle this dynamic menu:

• Locate the sort icon: The icon element might have a class like jqx-grid-column-header-sort-icon. Target it for the specific column:

  const sortIcon = element(by.css('div.jqx-grid-column-header:nth-child(2) .jqx-grid-column-header-sort-icon'));
  

• Wait for the dropdown to appear: Since the menu is dynamic, use Protractor's ExpectedConditions to wait for it to become visible after clicking the icon:

  const sortMenu = element(by.css('.jqx-menu'));
  const menuAscOption = element(by.cssContainingText('.jqx-menu-item', 'asc'));
  
  sortIcon.click();
  browser.wait(ExpectedConditions.visibilityOf(sortMenu), 5000, 'Sort menu did not appear');
  

• Select the desired sort option: Click the asc or desc option, then verify the table sorting as before:

  menuAscOption.click();
  // Add validation logic here to confirm the table is sorted ascending
  

Handling Hidden/Dynamic Elements (When Inspector Doesn't Show Full Details) #

If the inspector isn't displaying the full element structure (common with dynamic or hidden elements), use Protractor's executeScript to fetch the full HTML of the header element:

browser.executeScript("return document.querySelector('div.jqx-grid-column-header:nth-child(2)').outerHTML").then(function(headerHtml) {
  console.log('Full column header HTML:', headerHtml);
});

This will log the complete markup of the header, making it easier to identify the correct selectors for the text and icon parts.

A quick tip: If the sort icon only appears on hover, use Protractor's actions() to hover over the header first before clicking the icon:

browser.actions().mouseMove(columnText).perform();
sortIcon.click();

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