I am on the hunt for a solution to extract the child elements nested within a specific parent element block (using page objects) and then be able to access them in a chained manner. For instance, let's say we have multiple widgets on a webpage:
<div id="widget-1">
<div class="name">Widget 42</div>
<div class="color">Blue</div>
</div>
<div id="widget-2">
<div class="name">Widget 23</div>
<div class="color">Red</div>
</div>
And we have a page object called widgetPage:
this.widget = function(num) { return $('div#widget-' + num) };
The goal is to specifically retrieve the name and color values from the first widget block only. This particular code snippet seems to achieve that in my test specification:
expect(widgetPage.widget('42').$('color').getText()).toBe('Blue');
However, it's not ideal to have selector logic directly in the test spec; this belongs in the page object itself. I have been struggling to find an effective way of accomplishing this. Various attempts have been made, such as...
this.getWidgetElms = function(num) {
return this.widget(num).then(function(w) {
return {
name: w.$('div.name'),
color: w.$('div.color')
};
});
};
// Unfortunately, this fails as name and color are undefined...
Ultimately, the aim is to be able to execute something like this (although currently non-functional):
expect(widgetPage.getWidgetElms('42').color.getText()).toBe('Blue');
It's evident that some error exists in my implementation... Can you suggest a correct approach to exclusively return the child elements of the initial widget block?