Vyřešeno: Foundation reveal + capybara-webkit

Daniel Hromada a Přemysl Donát, 27.3.2015

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).

V Seleniu to funguje

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í.

Foundation $namespace

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

Capybara-webkit namespace přepisuje

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).

Řešení

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.