V naší účetní aplikaci Bonobo používáme CSS framework Foundation 5. Na problém jsme narazili ve chvíli, kdy jsme potřebovali otestovat stránku s komponentou Reveal Modal. V prohlížeči modální okno fungovalo správně, ale ve feature testech se nám jej nedařilo zavřít. Testy padaly na chybě Capybara::Webkit::ClickFailed protože stále otevřené okno překrývalo prvky stránky, se kterými potřeboval test dále pracovat. Problém tedy musel být v použitém driveru capybara-webkit (1.x).
Zjistili jsme, že Selenium oproti cabybara-webkit tímto problémem netrpí. Selenium je ale oproti capybara-webkit mnohem pomalejší a tak jsme se rozhodli strávit hodiny hledáním řešení, abychom ušetřili sekundy automatického testování.
Když se na problém podíváme z hlediska JavaScriptu (vždycky je problém na straně JS), ukáže se, že funkce pro zavírání modálního okna (Foundation.libs.reveal.close) nejprve najde otevřená okna a následně je zavře. Selektor pro otevřená okna vypadá nějak takto
[data-{prefix-}reveal].open
kde prefix je Foundation namespace, který je možné globálně nastavit pomocí Sass proměnné.
Jak se dostane hodnota ze Sass proměnné do JavaScriptu? Foundation tuto hodnotu předává pomocí elementu meta.foundation-data-attribute-namespace a jeho css property font-family. Na to jsme přišli tak, že selektor pro otevřená okna v testech vypadal takto [data-Arial-reveal].open
Důvodem, proč capybara-webkit vídí u metatagu font-family Arial je, že sama tento font globálně nastavuje všem prvkům na stránce. To je také důvod, proč testy nevidí font ikonky (např. FontAwesome) a nedokáží na ně klikat (viz issue #494).
Problém můžete obejít nastavením namespacu přímo v JavaScriptu ještě dříve, než Foundation inicializujete:
Foundation.global.namespace = '';
$(document).foundation();
Ručně nastavený namespace už totiž Foundation nepřepíše.
Pokud byste se chtěli podívat na diskuzi okolo této issue na capybara-webkit github, tak dvě relevantní vlákna jsou zde: #736 a #728.