Test quickly changing scenario using selenium web driver in nodejs - node.js

I have a button which triggers a rest call and upon click of that button until the rest call triggers I disable the button.
I am writing a test case using selenium web driver and nodejs
button = driver.findElement(By.class("btn"));
await button.click();
console.log(await button.isEnabled()) //outputs true
But I can see that the button is being disabled and I am sure Iam selectingthe correct button the findElement statement.

The documentation for .isEnabled() says:
Is the element currently enabled or not? This will generally return true for everything but disabled input elements.
So what you are seeing is expected behaviour.
To test your scenario, you will need the following approach:
click your button
click the same button again
the second click you are expecting to fail, so you will have to wrap it in whatever is the node.js equivalent of try..catch (sorry, I'm a Java guy)
inside of the catch, set a variable to true
afterwards test the variable has been set

The scenario you have described is to click a button, verify it becomes disabled, and then verify it becomes enabled. There are probably a few ways to do this. I'm looking at the documentation and here is one way:
button = driver.findElement(By.class("btn"));
button.click();
driver.wait(until.elementIsDisabled(button));
driver.wait(until.elementIsEnabled(button));
If the button never becomes disabled, an exception will be thrown. If the button never becomes reenabled, an exception will be thrown. So, the fail condition is either one throwing an exception. The pass condition is no exceptions.
NOTE: disabled and enabled, in Selenium terms, is generally referring to an INPUT tag. If your button is not an INPUT tag, then this won't work. You will need to detect some CSS style being applied/removed to determine disabled/enabled.

Related

Selenium/ python performing a click with browser.execute_script VS. normal click line

I wanted to click on something in a webpage so I used
WebDriverWait(browser, 30).until(EC.presence_of_element_located((By.CSS_SELECTOR, "#styleguide-v2 > div.banner-container > a:nth-child(2)")))
except that it doesn't work in the background.I have to switch to the browser manually where it to be seen on my screen so that the code works properly.
Then I added this
x = WebDriverWait(browser, 30).until(EC.presence_of_element_located((By.CSS_SELECTOR, "#styleguide-v2 > div.banner-container > a:nth-child(2)")))
browser.execute_script("arguments[0].click();", x)
now it works like charm, my question is what's the difference? I want to know what's happening behind this
the webpage https://www.imdb.com/title/tt0198781/
presence_of_element_located expected condition finishes and the program continues to the next call while the element already created but still not clickable and still not located on it's final position on the page and still not ready to accept regular click.
JavaScript click can handle this kind of click, however this doesn't really imitates real UI user action.
To mimic real user action you should use element_to_be_clickable expected condition and click the element only when it became clickable.
visibility_of_element_located didn't work because the element is not actually visible itself, so we had to use element_to_be_clickable expected condition.
It is also possible that element is covered by some other element during the page rendering when it is literally become clickable but the page is still rendered. In this case we have to add some hardcoded delay or to wait until the element covering the desired button is disappeared. this can be achieved by invisibility_of_element_located expected condition for the covering element.

Unable to check the checkbox in GEB

I am trying to check my check box in Geb.
I have tried following codes, but no luck
$('input', type:'checkbox', id: 'chkTermsConditions', tabindex: '-1').value('true')
$(".CheckBoxUI").value('true')
Following is the HTML
After mouse go over the check box additional text updated (marked in the screen shot)
You are attempting to check the box which has the attribute with value='true'
From the Geb manual:
The value of input, select and textarea elements can be retrieved and set with the value method. Calling value() with no arguments will return the String value of the first element in the Navigator. Calling value(value) will set the current value of all elements in the Navigator. The argument can be of any type and will be coerced to a String if necessary. The exceptions are that when setting a checkbox value the method expects a boolean (or, an existing checkbox value) and when setting a multiple select the method expects an array or Collection of values.
Try this:
$("#chkTermsConditions").value(true)
If you are using non standard HTML generated by some other platform. You may have to resort to clicking the element or using javascript.
The element that produces the desired click result could be one of the surrounding elements. If the widget is javascript controlled you may have to call a function that is embedded into the page for that widget. If its a javascript widget I cannot help you unless you can point me to a page which uses the same platform.
Try:
$('a[class=CheckRadioFocus]').click()
$('a[id=termLink]').click()
or any of the other surrounding elements.
I managed to check the check box with $(".CheckBoxStyle").click()
Only issue is still Submit button doesn't get enable. Following is the html code for before and after checking the check box in real situation.
I tried the to click on the submit button with following code. It doesn't give any error. But still doesn't move to next page as expected.May be because of Submit button disable issue.
$("#submitBtnMsg").click()
Edited :
It was turned out above was application related issue. We have to click on the address after selecting via address validation service. Then only Submit button get enable.
$(".RedColor").click()

context.redirectToPage & $$PreviousPage

i have a button that is calling an agent , and i would like to return to the calling page as the last line of the button.
Is there a way to use context.redirectToPage() in conjunction with "$$PreviousPage" instead of capturing the previous page via a before page load scope variable?
Thanks !
If you just want to 'stay on page' use a partial refresh and eventually the standby control. If you want to get to the previous page you can chain simple actions. Action 1 would be 'run code' action 2 the redirect.
You might want to check your response time. Converting your agent to a Java class will most likely give you better response times

calling validation on tab click ( jQuery-Validation-Engine )

I have set up the jQuery-Validation-Engine addon (https://github.com/posabsolute/jQuery-Validation-Engine) and it works great on the submit button.
However, since i invoked a tab-based interface, it doesn't really bring the user back to the proper tab with the error fields.
As a work around, i've decided its better to validate each tab when leaving to the next one (as it is a step-wise tab) so that the button click at the end will only 'really' need to correct any errors on the currently displayed tab.
I'm using a simple anchor to call some div swaps (using negative margins for content off-page).
I'd like to invoke the validation method to this as well.
Documentation says it can only be attached to a form element.
Any ideas?
Update- i ditched the tab idea and am now using one big form so this no longer really applies.
No support led to going after a different approach. No longer needed.

How to use Geb to check element attribute value after page event

After a bit of help here, I am writing a functional web test using Geb and want to test the disabled attribute value of an form submit button both before and after an event has occurred, the flow should be as follows:
Load page, submit button is declared as disabled in page source so should be disabled e.g. <input type="submit" class="submit" disabled="true"/>.
Check a checkbox on the page, this should result in a piece of JQuery code executing which will enable the disabled submit button programatically using: $('input.submit').attr('disabled', false);
My first attempt was to use the assertion $('input.submit').#disabled == 'true', this appeared to work for the initial check after page load however after executing my JQuery code to enable the button a subsequent check still returns the same result. This has caused me to wonder if this kind of check is only able to report the value at page load time and doesn't see any subsequent programmatic changes?
I then discovered Geb's jquery itegration, I was hoping I could use this to return the value of the submit button and do my assert on this e.g. $('input.submit').jquery.attr('disabled') == false however the Geb documentation confirms that all calls to the .jquery property return the Geb Navigator instance so sadly I don't think I can return the information I want.
I have also doubted whether the JQuery code was actually toggling the submit button disabled state, I have tested this extensively using Firebug and can confirm that this is working perfectly in the browser, so I suspect this is either an issue with my understanding of Geb or perhaps a limitation of Geb itself?
It strikes me that checking the value of element attributes after performing some action on a page might be a common use-case, hence I'm rather hoping that I've missed some trivially simple way of doing this. Would be most grateful for any pointers to help me get this sorted.
Cheers,
Edd
Have done a bit more testing and have now achieved a satisfactory result. I was doing a couple of things which I now believe are inproper, namely trying to set the disabled attribute value to illegal values of true and false like this:
$('input.submit').attr('disabled', true);
$('input.submit').attr('disabled', false);
Looking at the HTML forms specification the disabled attribute is shown not to take a value, rather it's presence alone indicates that an element is disabled. Modifying my code to honour this and remove the attribute to indicate enablement of an element seems to have done the trick:
$('input.submit').attr('disabled', true);
//This time we remove the disabled attribute rather than setting it to false.
$('input.submit').removeAttr('disabled');
Note: I am still setting the value of disabled to true since I can't determine how to set the attribute without setting a value, see this SO post for further details.
Using the above I am now able to use Geb to assert the disabled/ enabled status of elements like this:
//Check that something is disabled.
deleteSelectedButton.#disabled == 'true'
//Check that something is enabled.
deleteSelectedButton.#disabled == 'false'
Note: Geb seems to require a string literal indicating the expected status rather than a boolean, which iirc caused my assertions to fail.
So that's it - all is now working nicely and I'm running along writing loads of Geb tests! Hope this explanation is of some use to others.
Rebroadcasting my post on the Geb mailing list:
After you execute the jQuery code that enables the button, is it possible that you are checking the result before the code has actually enabled the button? For example, are doing something like:
waitFor { $("input.submit").#disabled == "false" }

Resources