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

Question

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:

1. Load page, submit button is declared as disabled in page source so should be disabled e.g. <input type="submit" class="submit" disabled="true"/>.
2. 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

Solution 1

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.

Solution 2

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" }