我可以使用什么工具在浏览器中测试：contains（）CSS3伪类？ [英] What tool can I use to test the :contains() CSS3 pseudo-class in a browser?

问题描述

我试图开发与Selenium一起使用的CSS选择器。特别是我想使用伪类：contains（）。虽然W3有一个CSS3草稿与：contains（）它似乎最终版本没有包括它。

我使用Chrome的工具来帮助我检查我的CSS选择器，并确保我做的正确。 Chrome似乎没有实现：contains（），这是可以理解的。

有一个工具，我可以使用它将允许我尝试使用选择器： contains（）在我们的网页上？

我使用的是Mac与Lion。我也可能局限于使用Firefox 3.5.7（我被告知暂停更新现在）。

解决方案

jQuery的选择器引擎还实施 ：contains（） 伪类。 据我所知， jQuery和Selenium实现它以相同的方式。

我不知道你将如何能够测试它的网站没有使用jQuery，但在网站，这是一个例子，在Chrome的JavaScript控制台上查看这个堆栈溢出问题（这是一个很好的例子，根据您是否已登录，您可能会得到不同的结果）：

  $（＃mainbar div [id]：contains（'selector'））。get（）/ * DOM objects with .get（）* / 
  

  [< div class =questionid =question> ...< ; / div>，< div id =answers> ...< / div>，< div id =answer-9007154class =answer> ...< ; / div>，< div id =answer-9008184class =answer> ...< / div>] 
  

I am trying to develop CSS selectors to use with Selenium. In particular I want to use the pseudo-class :contains(). Although the W3 has a draft of CSS3 with :contains() it appears that the final version didn't include it.

I am using Chrome's tools to help me check my CSS selectors and make sure I am doing it right. Chrome doesn't appear to implement :contains(), which is understandable.

Is there a tool that I can use that will allow me to try out selectors that use :contains() on our webpages?

I am using a Mac with Lion. I am also potentially limited to using Firefox 3.5.7 (I was told to hold off on updating for now).

解决方案

jQuery's selector engine also implements the :contains() pseudo-class. It is to my knowledge that jQuery and Selenium implement it the same way.

I'm not sure how you would be able to test it on sites that don't make use of jQuery, but on sites that do, it's just a matter of firing up your browser's JavaScript console, and running jQuery selectors in the console.

Here's an example with viewing this very Stack Overflow question on Chrome's JavaScript console (you may get different results depending on whether you're logged in or not):

> $("#mainbar div[id]:contains('selector')").get() /* DOM objects with .get() */

[<div class=​"question" id=​"question">​…​</div>​, <div id=​"answers">​…​</div>​, <div id=​"answer-9007154" class=​"answer">​…​</div>, <div id=​"answer-9008184" class=​"answer">​…​</div>​]

这篇关于我可以使用什么工具在浏览器中测试：contains（）CSS3伪类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！