Checkbox <input> never has checked atrribute in DOM

[redallen]

Unless we pass defaultChecked to a checkbox, React doesn't change the checked attribute in the DOM. This is default browser behavior. React has a related issue that's been open for years. However, changing the attribute makes it easier for Selenium testing to take place.

We should evaluate whether we want to make the attribute change in the DOM like with #2749, or revert it and instead rely on checking the value property of the <input>.

[redallen]

The <input type="checkbox"> defines a checkbox.

• W3Schools

By default, the browser does not touch the checked attribute that may be defined on an <input> element like <input checked=""> when a user checks or unchecks a checkbox. This is apparent in a simple example.

As you can tell, after checking the "I have a car," the checked attribute does not appear in the DOM. After unchecking the "I have a boat," the checked="" attribute still remains in the DOM.

This implementation is consistent across Firefox and Chrome. Indeed, the only way to tell if the checkbox is checked or not is to look directly at the DOM element's checked property:

I opened #2749 to make it easier for QE to just look at the checked attribute rather than the checked property in the DOM for our Switch component. I believe it is better is to revert it and instead rely on Selenium's getProperty, for which I have provided a simple example using Python 2:

  1 from selenium import webdriver
  2 from selenium.webdriver.support.ui import WebDriverWait
  3 from selenium.webdriver.support import expected_conditions as EC
  4 from selenium.webdriver.common.by import By
  5 from selenium.common.exceptions import TimeoutException
  6 
  7 driver = webdriver.Chrome()
  8 driver.get("https://patternfly-react.surge.sh/patternfly-4/components/checkbox")
  9 delay = 3 # seconds
 10 try:
 11     myElem = WebDriverWait(driver, delay).until(EC.presence_of_element_located((By.ID, 'check-4')))
 12     print "Page is ready!"
 13     print myElem.get_property('checked')
 14     myElem.click()
 15     print myElem.get_property('checked')
 16 except TimeoutException:
 17     print "Loading took too much time!"

It has the expected output:

Page is ready!
False
True

This should be presented to @abalakh so he knows how to use it when we revert the change he may have been relying on.

[abalakh]

@redallen thank you! @quarckster fyi ^

[redallen]

#2997 is the followup to this spike.