AUI 9 Checkboxes in Confluence 7 Break Functional Testing Frameworks

Confluence Development Confluence Server
, , ,
4

Hi @jcarter @TureHoefner,

To Atlassian, what’s the driving reason to make the actual input element for the checbox non-focusible? What end does that serve? Also, can Atlassian change this aspect of AUI 9 without issue?

This change in AUI’s form styles occurred in AUI 8.5. The issue key was AUI-5053, and here’s the PR.

The reason this was done was to support the widest range of HTML patterns being used for form fields, while still achieving the ADG style. When using a pure-CSS solution, some markup patterns would end up with invisible glyphs for the checkbox or radio, which was a blocker.

The compromise was to add an additional explicit element via JavaScript and style that. The cost was the need to visually hide the <input> element.

As pointed out in this thread, Selenium doesn’t interact with hidden elements. It’s a reasonable default behaviour - try to emulate what a real user would be able to do. In this case, though, users are able to interact with these faux form field glyphs. Mouse and screen-reader users can click the <label> element, and keyboard users can still focus the <input> element.

You can adapt to the change in one of three ways:

  • Update your selenium tests to interact with the field’s <label> rather than the <input> element directly. Interacting with the label has the added benefit of testing that your forms are accessible to screen reader users, since it demonstrates the DOM has a link between the two.

  • Use one of Selenium’s lower-level programmatic APIs to find the <input> element and click it.

    WebElement el = driver.findElement(By.id("visually-hidden-input"));

// this doesn't work out...
el.click();
// throws in webdriver 2 with something like "cannot click because another element is in the way"
// throws in webdriver 3 with "cannot scroll element in to view"

// this sometimes works out...
(new Actions(driver)).moveToElement(el).click().perform();
// works in webdriver 3 on zero-opacity, negative z-index, and clip-hacked elements ... 
// fails in webdriver 3 if the element was clipped outside an overflow boundary.
// fails in webdriver 2

// this seemingly always works out...
((JavaScriptExecutor)driver).executeScript("arguments[0].click();", el);
// works in webdriver 3
// works in webdriver 2

  • Override AUI’s CSS rule for hiding <input> fields during tests, so Selenium’s default behaviours will continue to work.

    	form.aui:not(.aui-legacy-forms) .checkbox input[type=checkbox],
	form.aui:not(.aui-legacy-forms) .radio input[type=radio] {
		position: static;
		width: auto;
		height: auto;
		clip: unset;
	}

    (Note that changing styles may invalidate any visual regression screenshots you are taking!)

Whichever of these routes you take, I’d suggest you wrap them in an abstraction like a “page object”, so that tests can describe what they’re testing, and the abstraction can handle the how.

It’s an oversight that this technical change did not end up documented in the upgrade guide for AUI 8.5. I’ve raised [AUI-5341] - Ecosystem Jira to track an update to the guide. My apologies for this. I hope the details above will help unblock you!

Cheers,
Daz

7 Likes