26

ページの CSS が正常にロードされ、そのスタイルが Watin 2.1 に適用されたことをどのようにアサートできますか?

4

4 に答える 4

29

いくつかの調査を行って回答を作成した後、CSS について知っておく必要があるすべてのこと、読み込まれたとき、およびそれを確認する方法を説明しているこのリンクに出くわしました。

提供されたリンクはそれを非常によく説明しているので、実際、今後の参考のためにいくつかの引用を追加しています.
興味があれば、私の答えは 2 番と 4 番のバリエーションです。

スタイルシートが実際に読み込まれるのはいつですか?

...

それはさておき、ここにあるものを見てみましょう。

// my callback function 
// which relies on CSS being loaded function
CSSDone() {
    alert('zOMG, CSS is done');
};

// load me some stylesheet 
var url = "http://tools.w3clubs.com/pagr/1.sleep-1.css",
    head = document.getElementsByTagName('head')[0],
    link = document.createElement('link');

link.type = "text/css"; 
link.rel = "stylesheet";
link.href = url;

// MAGIC 
// call CSSDone() when CSS arrives
head.appendChild(link);

素敵で簡単なものからばかげたものまで分類された魔法の部分のオプション

  1. link.onload を聞く
  2. link.addEventListener('load') を聞く
  3. link.onreadystatechange を聞く
  4. setTimeout と document.styleSheets の変更をチェック
  5. setTimeout を使用して、作成した特定の要素のスタイルの変更を確認しますが、新しい CSS でスタイルを設定します

5番目のオプションはクレイジーすぎて、CSSのコンテンツを制御できると想定しているため、忘れてください。さらに、タイムアウトで現在のスタイルをチェックします。つまり、リフロー キューをフラッシュし、遅くなる可能性があります。CSS の到着が遅いほど、リフローが多くなります。だから、本当に、忘れてください。

では、魔法を実装するのはどうですか？

// MAGIC 

// #1   
link.onload = function () {
    CSSDone('onload listener');
};   

// #2   
if (link.addEventListener) {
    link.addEventListener('load', function() {
        CSSDone("DOM's load event");
    }, false);   
};   

// #3   
link.onreadystatechange = function() {
    var state = link.readyState;
    if (state === 'loaded' || state === 'complete') {
        link.onreadystatechange = null;
        CSSDone("onreadystatechange");
    }   
};

// #4   
var cssnum = document.styleSheets.length;
var ti = setInterval(function() {
    if (document.styleSheets.length > cssnum) {
        // needs more work when you load a bunch of CSS files quickly
        // e.g. loop from cssnum to the new length, looking
        // for the document.styleSheets[n].href === url
        // ...

        // FF changes the length prematurely :(
        CSSDone('listening to styleSheets.length change');
        clearInterval(ti);
    }   
}, 10);

// MAGIC ends
于 2012-05-14T11:06:32.290 に答える
12

@ShadowScripter の記事が更新されました。新しい方法は、FF を含むすべてのブラウザーで機能するとされています。 

var style = document.createElement('style');
style.textContent = '@import "' + url + '"';

var fi = setInterval(function() {
  try {
    style.sheet.cssRules; // <--- MAGIC: only populated when file is loaded
    CSSDone('listening to @import-ed cssRules');
    clearInterval(fi);
  } catch (e){}
}, 10);  

document.getElementsByTagName('head')[0].appendChild(style);
于 2014-01-15T20:11:32.947 に答える
2

ページの読み込み後、いくつかの要素のスタイルを次のように確認できます。

var style = browser.Div(Find.ByClass("class")).Style;
Assert.That(Style.Display, Is.StringContaining("none"));
Assert.That(Style.FontSize, Is.EqualTo("10px"));

や。。など...

于 2012-05-14T07:04:18.937 に答える