2

I have an app that brings up search results in a tabular format when the user performs a search. The search results has about 15+ columns. For this, I have an UI test case that's designed to fetch every single column heading using the following:

var resultColumns = "//div[contains(@ng-grid,'searchResult')]//div[contains(@class,'ngHeaderCell')]//div[contains(@class,'HeaderText')]";
var allResultColumnsText = function() {
return element.all(by.xpath(resultColumns)).getText();
};
expect(allResultColumnsText()).toEqual("[matching text]");

I was expecting this to code to be able to fetch all the columns of the table, but I've noticed that only the values that are displayable on the page depending on the size of the browser window are being fetched. For example, if only up to 5 columns are being displayed in the browser while running the test, then only those 5 column headings are fetched by the test code above.

I think AngularJS dynamically populates the DOM to only include the columns that can be displayed. Is there a way to fetch all columns using some function in protractor and not just the ones that are visible on the screen?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
ktbt
  • 21
  • 1

1 Answers1

0

Protractor is an e2e test framework, it will only works with elements that the user can see (which make sense).

-You can work out the css to make your app more responsive.

-I think another alternative, to be able to select dom elements that are not visible to the user in the browser is to include Jquery in your test cases (jquery selectors works directly with the DOM):

  var $ = require('your/path/to/jquery/jquery.js');

to use xpath with Jquery have a look at this

Community
  • 1
  • 1
JoMendez
  • 880
  • 9
  • 22