I am new to UI testing and using Nightwatch. I'm unsuccessfully trying to click an element selected with xpath. It seems like a simple case, the element is asserted as visible, but it's not being clicked.
css:
<a class="blabla" href="/xx/000/aaa">
<div class="action-button__inner">Open This</div>
</a>
selector:
openThis: {
selector: '//div[text()="Open This"]',
locateStrategy: 'xpath'
}
command:
.waitForElementVisible('#openThis', 2000)
.click('#openThis');
output:
✔ Element <//div[text()="Open This"]> was visible after 74 milliseconds.
BUT, it's not clicking on it, so the following assertions fail. All help would be appreciated! Thanks a lot guys!
instead of using waitForElementVisible property try using waitForElementClickable
.click() is not responding sometimes. waitForElementClickable didn't work.
Using twice .click() .click() is ugly but does the job.
Related
I have a component with a Vuetify Select component:
<v-select
:items="corporations"
label="Corporation name"
data-test="corporation-name"
outlined
></v-select>
And I want to simulate a selection with a Cypress test:
cy.get('[data-test="corporation-name"]').select('Thorgate');
Unfortunately, I can't and I have this error message:
CypressError: cy.select() can only be called on a <select>. Your subject is a: <input data-test="corporation-name" id="input-13" readonly="readonly" type="text" aria-readonly="false" autocomplete="off">
I have also try to enter the value with a type()but Cypress told me
CypressError: Timed out retrying: cy.type() failed because this element is readonly:
Any idea, please?
The errors are pretty self-explanatory.
You're trying to apply a cy.select() method to an <input> tag, when you need a <select> tag
You're trying to .type() into a <input readonly>
cy.select() can only be applied to a <select> tag. If your v-select component renders a "custom select that is a bunch a dynamic divs and inputs INSTEAD of a select", then you need to create a custom Cypress command to handle a cy.customSelect() behavior. For example, it would: click on the main wrapper, find a option by typing words, and click on it... therefore selecting the option
For the second one, because your input is readonly, you can try to use {force: true} in your options when typing (cy.type("text", {force: true})
A little bit late, but, I hope this can help someone. ;)
The easier way I found to solve the problem with vuetify v-select, is using {force: true}, as stated by Jordan, and "pressing enter" at the end of string, like so:
cy.get('[data-test="corporation-name"]').type('Thorgate{enter}',{force:true});
https://docs.cypress.io/api/commands/type#Arguments
Hi I have this element from a dropdown menu I try to select:
<div class="tt-suggestion tt-selectable">
<strong class="tt-highlight">Auto Customer</strong>
</div>
If I use element(by.xpath("//strong[contains(text(),'Auto Customer')]")).click(); I can select it no problem. But if I use element(by.xpath("//*[contains(text(),'Auto Customer')]")).click(); I get "Failed: element not visible"
Can someone explain this to me please?
Thank you
Because the * in //*[contains(text(),'Auto Customer')] means any tag, not only the strong Tag. But //strong[contains(text(),'Auto Customer')] must be strong Tag.
//*[contains(text(),'Auto Customer')] should find more then one elements on page, and the first one is not visible. You can try this xpath in Chrome DevTool's Element Tab to see how many elements it can find and the first one is visible or not.
I use casperjs 1.1 (phantom 1.9.8) for loggin a website.
After login, there's the spinning throbber and I have:
<div id=throbber style='display: block'></div>
<div id=main style='display: none'></div>
Some dynamic content is loaded in the main div, so after loading:
<div id=throbber style='display: none'></div>
<div id=main style='display: block'>some content</div>
I tried to get a screenshot of the loaded content, since I need to perform clicks and operations, but I always get the throbber picture. I tried to wait 30 seconds, to waitforselector, waitfor document.getElementById('throbber').style.display == 'none' but without luck...
I use the alwex/php-casperjs wrapper (with some handmade additions) so my last try looks like this:
$casper->click('button[type="submit"]');
$casper->waitFor("document.getElementById('throbber').style.display == 'none'"); //implicit 5000 timeout
$casper->capture($screenshot_large, time().'.png');
This particular try returns "'null' is not an object (evaluating 'document.getElementById('throbber').style')" but I'm opened to any alternative.
Thank you for any suggestion or alternative.
casperjs demonstrated to be unreliable with such webpages.
A different solution based on Selenium perfectly worked.
I'm trying to put a scroll up (back to top) button in my blogger blog.
That should be, in principle, quite simple, but I don't why I can't manage to do it. Now after trying so many things I'm totally frustrated.
I'm using the following html code:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#"><img src="url address of image" /></a>
The button is there as expected, but when I click on it, it reloads the blog instead of going to the top. Why?? no clue.
I tried to use an "id" in the logo image and link to it, and I've also tried to use in the blog head a name tag "name=Top" and link it with href="#Top".But it doesn't matter. It always reload the blog instead of going to the top.
For instance, when I'm inside a post and I click on the button it goes to the main page instead of scrolling up within the post.
If you want to check it yourself, please do it. My blog is cortarcoserycrear.blogspot.com
Whatever help you can provide me it would be very appreciated because I don't know what's happening.
Thanks.
You should be using Javascript/JQuery to do this.
Refer to this question: How to scroll to top of page with JavaScript/jQuery?
What I finally used to solve my problem was:
Button html:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#wrap" class='go-to-top' title="Back to top"><img src="image url" /></a>
Body html:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script>
$(function () {
$('.go-to-top').click(function () {
$('html,body').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
I have radio buttons that are located inside a table, such as:
<tr id="radiofield-1080-inputRow">
<td class="x-form-item-body" id="radiofield-1080-bodyEl" colspan="3">
<input type="button" id="radiofield-1080-inputEl" class="x-form-field" autocomplete="off">
<label id="radiofield-1080-boxLabelEl" class="x-form-cb-label">My Label</label>
</td>
</tr>
I do find the input element, by the following code:
xPath = String.format("//tr/td[contains(#id,'%s')][contains(label,'%s')]/label", xType, text);
webElement = webDriver.findElement(By.xpath(xPath));
but isSelected() or click() doesn't seem to work on it.
Do you have any suggestion?
Haven't used selenium in a while but from a quick google it looks like you should try the isChecked and check/uncheck methods.
Here's the Javadoc but for some reason can't get a decent link, obviously check on the Selenium object. If you're using a different version or if I misunderstood something sorry.
http://selenium.googlecode.com/git/docs/api/java/index.html
In your code snippet problem with locator.
Use any of the below below locators
By.cssSelector("input[id*='radiofield-']");
By.id("radiofield-1080-inputEl")
By.xpath("//tr/td[contains(#id,'radiofield-')]/input")
Try clicking on the "input" instead of the "label".
xpath of input:
"//input[#id='radiofield-1080-inputEl']"
If the input id is not always the same, you can try this, the location of input will be based off the label:
//label[text()='My Label']/preceding-sibling::input
Thanks for all your answers.
My finding concluded with the following:
ExtJS implement radiobutton and checkbox as button, therefore the selenium isSelected() is not functioning.
There is a need to implement isSelected(), as suggested at:
How to check if extjs checkbox is selected in selenium?
The click() does the work, as it is a button.
Thanks again, Michal