I am looking to automate some of my testing processes and I am relatively new to Nightwatch.js and javascript. Is there a way that I can click an element based on it's class and position in the subsequent array that will be returned if there are multiple elements with the same class.
For example take the following HTML: -
<div class="clickable-button"><p>Some Text</p></div>
<div class="clickable-button"><p>Some Text 2</p></div>
<div class="clickable-button"><p>Some Text 3</P></div>
If I use chrome development tools and run the following command in the console: -
$('.clickable-button')
It returns an array of the three elements listed above.
I would like to click the first <div> element and want to know if there is a way I can do this using a CSS selector? I cannot select via the text that appears within the <p> tag as this is dynamic data.
I have tried the following commands in Nightwatch: -
browser.click('.clickable-button'[0])
browser.click('clickable-button[0]')
Neither of these options work. Any help or advice would be appreciated.
You could probably use :nth-of-type
browser.click('.clickable-button:nth-of-type(1)');
BTW :nth-of-type is part of CSS3 so it is not supported by older browsers.
Besides using CSS selector, XPath is another option, you can do
browser
.useXpath() //ignore this line if you already selected xpath as strategy
.click('(//div[#class="clickable-button"])[1]')
to locate the first button. Reference
Related
I have a simple script in which I am trying to test the functionality of some buttons. Inside of my html I have a button:
<button> MyList </button>
In my script I tried the following:
...
await page.type('button[value="MyList"]');
await page.click('button[value="MyList"]');
This was a shot in the dark as I could not find a way to select an element by value in the puppeteer docs. Obviously it cannot find it and I get the error: 'No node found for selector: button[value="AccountList"]'
This is because the button's value is not MyList. MyList is the text content of the elment which is different than the value which is an attribute. In CSS you cannot query for elements by their text contents. Since there is no such native CSS selector that will work for your use-case, you have to traverse the DOM manually and look for the matching nodes.
There is such selector implemented in jQuery -
:contains(). I guess you can use some similar library for Node.js.
I have a problem, can`t click on web element having some unique text.
I have this structure:
<div class="wg-wagon-type__item" data-reactid="10"
<div class="wg-wagon-type__title" data-reactid="11">Text</div>
I try this
.click('.wg-wagon-type__title:contains("Text")')
But I have an error
ERROR: Unable to locate element: ".wg-wagon-type__item .wg-wagon-type__title:contain("Text")" using: css selector
How can I correct click on this element?
Is there any reason why you can't simply target the class wg-wagon-type__title?
.click('.wg-wagon-type__title')
Unfortunately there isn't a CSS selector that matches on the text of an element. However, nightwatch has the capability to run javascript on the browser via 'api.execute' and that allows you to do string matching.
Alternatively, you could use an xpath selector and use that to match the text
.click("//div[contains(#class, 'wg-wagon-type__title') and text()='Text']")
I am trying to get id(id 1) name of a div from a div(class 2) in the next line. When I use previousSibling, it worked on google chrome but not on safari since safari catches the area between divs as "#text".
In my code, id name is very unique and there are many different id name so I do not want to find by id name.
Is there any good way to access previous sibling??
<div id="parent">
<div id="1">
<div class="1-1"></div>
<div class="1-2"></div>
</div>
<div class="2"></div>
</div>
When I use previousSibling, it worked on google chrome but not on safari since safari catches the area between divs as "#text".
It works. It just doesn't do what you want it to do. It returns sibling Nodes. In this case a TextNode.
What you are looking for is an Element, a specific subclass of Node. For that there's the .previousElementSibling property.
Inspecting a DOM node with the debugger and then looking up the documentation on the available properties is a good way to find such things.
<div>
<a href='...'>LINK</a>
<img class='image' />
</div>
<div>
...
</div>
I want to get a protractor element for the img tag with image class. I already know the link text 'LINK'. In other words, "How do I locate a sibling of a given element?".
The first line of the code could look like this:
browser.findElement(by.linkText('LINK'))
Any ideas?
Thanks & Cheers
Thanks for the inspiration. Here's my solution, not the one I was hoping for, but it works:
element(by.css('???')).element(by.xpath('..')).element(by.css('???')).click();
The chaining and the by.xpath, which allows to get back to the parent are the keys of the solution.
This is what I actually implement on a Page Object:
this.widgets['select-status'] = this.ids['select-status']
.element(by.xpath('following-sibling::div[1]'));
this.widgets['select-status.dropdown'] = element(by.css('.btn-group.bootstrap-select.open'));
The page is based on Bootstrap along with Bootstrap Select. Anyways, we traverse the DOM along the following-sibling axis. Refer to XPATH specification for yourself.
Using Xpath selectors is not a better choice as it slows down the element finding mechanism.
I have designed a plugin to address this specific issues: protractor-css-booster
The plugin provides some handly locators to find out siblings in a better way and most importantly with CSS selector.
using this plugin, you can directly use:
var elem = await element(by.cssContainingText('a','link text')).nextSibling();
elem.click(); //proceed with your work
or, use this as by-locator
var elem = element(by.cssContainingText('a','link text')).element(by.followingSibling('img'));
You can always checkout the other handy methods available here...
Now, you can find web elements such as:
Finding Grand Parent Element
Finding Parent Element
Finding Next Sibling
Finding Previous Sibling
Finding any Following Sibling
Finding First Child Element
Finding Last Child Element
And, guess what, everything you can find using 💥 CSS Selectors 💥
Hope, it will help you...
I have a node defined by the following HTML markup:
<div id="_13:3AVAsa7qVvAprAar19ie8LRorrLEm2g" >asdf</div>
I need to get a reference to it without using it's full id like:
dojo.byId('_13:*');
Is it possible or is there any other ways that could be achieved?
You should use the attribute starts-with selector.
I've never used Dojo, but looking here:
http://dojotoolkit.org/reference-guide/dojo/query.html
It seems that you need this:
dojo.query('div[id^="_13:"]')
That same link also contains examples of other useful selectors at the end of the page.