amiller956 amiller956 - 4 months ago 17
Javascript Question

Is there a way to check two different by.css() attributes in the same element() check in protractor?

I am testing elements in a grid on an HTML page with protractor. There are 2 columns and multiple rows. Currently my code is

browser.element(by.css('div[data-row="1"]')).element(by.css('.widget-toggle-btn')).click();


HTML:

<div data-row="1" data-col="0" ....other stuff here>
....(other elements)....
</div>
<div data-row="1" data-col="1" ....other stuff here>
....(other elements)....
</div>


but as you can see there are 2 columns in data-row 1. Luckily the one I want is in 'data-col="0"', but I don't see a way to get to the toggle-btn that's in 'data-col="1"'. The grid is symmetrical so all elements are the same in the view, but clicking on the buttons give different results. Is there a way for me to designate two attributes in a by.css() locator or do I have to do it a different way?

Answer

Yes, just add a new condition in the square brackets:

div[data-row=1][data-col=1]

You can actually join the chain of selectors in a single selector:

$('div[data-row=1][data-col=1] .widget-toggle-btn').click();

here $() is a shortcut to element(by.css()).