I have been tasked with creating a functional test for our custom Dropdown Control that includes a "readonly" feature. Initially, we planned to ensure that the dropdown list would not appear when clicked on, as it is typically expected behavior. The list does not actually exist in the DOM until it is rendered.
Here is the structure of the functional test:
'test case: can be interactive in read-only mode without opening the menu': function() {
return this.remote
.get(require.toUrl('/tests/dropdown/readonly'))
.setFindTimeout(10)
// Simulate click on the dropdown pseudo element
.findById('readonly-dropdown-shdo')
.click()
.end()
// try to locate the dropdown list (it should not be present since this is a "readonly" dropdown)
.findById('dropdown-list')
.then(function(element) {
expect(element).to.be.empty;
})
.end()
// Verify the currently active element (should be the psuedo-element)
.getActiveElement()
.getAttribute('id')
.then(function(id) {
expect(id).to.equal('readonly-dropdown-shdo');
})
.end();
},
The test fails at .findById('dropdown-list') due to a "NoSuchElement" exception thrown by Selenium, which is accurate because the element does not exist. The issue lies in Intern's test runner automatically marking these errors as failures, even though it aligns with the expected behavior.
My query: What is the recommended approach to validate the absence of an element on a page during a specific scenario?