Toggle All - Potentually failing test depending on environment

[dmeehan1968]

todomvc/tests/page.js

Line 29 in 4e301c7

this.getToggleAllCss = function () { return 'input' + classOrId + 'toggle-all'; };

This is the code that selects the 'Toggle All' button. I've been writing some tests of my own against TodoMVC using WebdriverIO to make the element selections (I'm experimenting with BDD and browser testing tools). If I target this element by using the input.toggle-all selector (as used by the tests here), when I instruct the browser to click it reports that another element (the first todo in the list) will actually receive the click (and therefore raises and error).

Looking at the way the element is rendered in both Chrome and Safari on mac, the input element is indeed overlaying (or overlayed by) the checkbox for the first todo item. The label:before content is the element that is actually positioned where the chevron is on screen. Targetting the label (label[for="toggle-all"] actually produces the correct result (all items toggled). NB: I don't seem to be able to combine attribute and the :before pseudo selector, which in browser dev tools appears to be the actual node that represents the on-screen position and bounding box, but that might just be my CSS ignorance, or a failing in WebdriverIO).

I'm testing against the React example, it might be something to do with the way the CSS there is constructed, but it seems like the main suite should fail, unless there is some rendering difference. I've not explored TodoMVC's unit tests.

I may be out of date/ill-informed, but I thought that generally it was good practice to target the label as well as/instead of the actual input element, especially in a case such as this where the real input element has been concealed/replaced by a custom element (chevron inserted via :before).