how to test onchange event for a text field in selenium? - selenium

I have to test a reactJS application where all the textbox in login.js have some onChange event.
Using .sendKeys(), i am able to pass the value, but after clicking login button, those onChange events are not triggered.
I have tried with tab, enter as well as .click() and .clear() method. They are not working. Please help!

Related

Clicking button with selenium doesn't throw exception but the button isn't actually clicking?

I am trying to click a button, which once clicked some text should appear. Selenium is not throwing any errors which means the buttons should have been clicked however the text is not appearing (it works manually).
<button class = "redButton one">
<img src = "images/name.png" class = redImage">
"Name"
</button>
I tried to click the button with the xpath: "//button[contains(text(), 'Name')]". I don't understand why the text is not appearing.
What is the expected text to be displayed after button click event? In order to help with this request, provide the HTML snippet of <button> before & after click event. Since this is working fine manually, did you try adding adequate wait time for the text to display?

How can I test that Browser tooltip is shown?

What do I have:
Laravel 5.5
Laravel Dusk 2.0.14
How can I test (assert) that browser tooltip
was shown, when I'm trying to submit a form without filling required field?
What I've tried:
$browser
->assertSee('Please fill out this field');
But it didn't work.
You can get the message with JavaScript:
$message = $browser->script("return document.querySelector('input[name=foo]').validationMessage")[0];
$this->assertEquals('Please fill out this field.', $message);
Note that the message will always be set as long as the input's value is invalid. This assertion also works before you press the submit button.

selenium testing a tooltip for an inactive button

on whom I am able to click, on clicking , nothing happens, i.e. the action is disabled. However, a tooltip gets displayed. The tooltip appears only when we focus on the button.
The html of the button is as follows:
<button type="button" style="color:#ffffff;" rel="rel-517347" data-toggle="popover" data-animation="true" data-placement="top" data-html="true" data-trigger="hover" data-content="<span class='text-center'>
<div>Ride can only be edited before </div><div>1 hour of pickup time.</div>
</span>" class="btn btn-default disbleBtn width_100" data-original-title="" title="">Edit Ride</button>
where Ride can only be edited before is the tooltip.
How can i verify the text of the tooltip as it keeps getting destroyed.
Note that isEnabled() function returns true here as i can click on the button, but no action takes place.
Is there any way I can verify the class of the button i.e btn btn-default disbleBtn width_100 ?
Is there any function or method for it?
I supposed you need to hover not click on the button. When hover tooltip is showing and than you click immediately and tooltip gone.
Do it manually with chrome devtools, open devtools-> sources tab, hover on the button and press F8 to pause then inspect tooltip element. After you get selector for tooltip try codes below:
new Actions(driver).moveToElement(buttonElement).perform();
String tooltipText = new WebDriverWait(driver, 10)
.until(ExpectedConditions.visibilityOfElementLocated(toolTipLocator).getText();
//Verify
Or try this:
new Actions(driver).moveToElement(buttonElement).perform();
new WebDriverWait(driver, 10)
.until(ExpectedConditions.textToBePresentInElementLocated(toolTipLocator, textToVerify)

How to force onClick event with Selenium?

I am testing an application that have the following html code:
...
<input
type="button"
class="picto modif"
onclick="hideDiv('divGlobalResult');showDiv('divForm')"
/>
When the user clicks on this button, the div divGlobalResult is hidden and the div divForm is shown.
I want to simulate this action with Selenium. Here is how I did:
focus css=input.picto.modif
fireEvent css=input.picto.modif click
However, the divForm appears while the second div divGlobalResult stays on the screen...
What am I missing?
function hideDiv(idDivElement) {
$("#" + idDivElement).css("display", "none");
}
function showDiv(idDivElement) {
$("#" + idDivElement).css("display", "");
}
thats happening because Selenium click function cannot simulate a real "Click" action performed with the mouse.
I have also faced this problem and the solution that best suited me was to take control of the mouse by using java robot and performing the click with it.
I hope this helps.

jQuery radio button change function not being triggered when it should

I have a problem with this jQuery Change function:
<input type="radio" name="words" value="8" checked><span class="word">word1</span>
<input type="radio" name="words" value="6"><span class="word">word2</span>
$("input[#name='words']:checked").change(function(){
alert("test");
});
The problem is that the event gets only triggered when I click the first option (value=8) which is checked by default.
How Can I trigger the event when clicking any other option?
Please note: I have tried the above function on both Chrome and Firefox and I have the same problem.
Thanks!
should be $("input[name='words']").change(function(){
You are only binding the event handler to :checked elements. So as the first input has the checked property set, that's the only one that receives the event handler. Remove :checked and it should work fine:
$("input[name='words']").change(function(){
alert("test");
});
Here's a working example. Note that I've also removed the # character from your selector. You haven't needed it since like jQuery 1.2 or something like that.
$("input[#name='words']:checked").change(function(){
That finds all the input elements with the name words (actually, it won't work: the XPath-style # attribute selector has been removed since jQuery 1.3) that are checked and binds an event handler to them. If the elements are not checked when the selection is made, no event handlers will be bound to them.
The easiest solution is to bind to all relevant elements, and only fire code if they have been unchecked:
$('input[name="words"]').change(function() {
if (!this.checked) { // checkbox was checked, now is not
alert('unchecked');
}
});
working link
$("input[name='words']").change(function(){
alert("test");
});
$("input[#name='words']:checked").change(function(){
alert("test");
});
You've subscribed change function only to the radiobuttons whitch is checked (:checked). Remove it from selector.
$("input[name='words']").change(function(){
alert("test");
});
Code: http://jsfiddle.net/DRasw/1/
Give id property of Radio buttons
Add property of OnClick="CheckClick()" on second redio button.
In jquery CheckClick() function
if ($('#rb2').attr('checked')) {
alert('rb2 test');
}