2012-01-25 2 views
4

셀레늄과 함께 사용할 CSS 선택기를 개발하려고합니다. 특히 pseudo-class : contains()를 사용하고 싶습니다. W3에는 CSS3의 초안이 포함되어 있지만 : contains() 최종 버전에는 CSS3가 포함되어 있지 않은 것으로 보입니다.브라우저에서 contains() CSS3 의사 클래스를 테스트 할 때 사용할 수있는 도구는 무엇입니까?

저는 CSS 도구를 사용하여 CSS 선택기를 확인하고 올바르게 처리하고 있습니다. Chrome은 이해하기 쉬운 contains()를 구현하지 않는 것으로 보입니다.

웹 페이지에서 contains()를 사용하는 선택기를 사용해 볼 수있는 도구가 있습니까?

저는 Mac 용 Lion을 사용하고 있습니다. 나는 또한 파이어 폭스 3.5.7을 사용하는 것으로 잠재적으로 제한된다. (나는 지금 업데이트하는 것을 미루라고 말했다.)

+0

무엇 최종 버전을? CSS3 모듈은 여전히 ​​대부분 초안입니다. –

+0

@ Šime Vidas : 예, 대부분 그렇지만 Selectors 모듈은 지난 9 월 W3C 권장 사항으로 졸업했습니다. 그것도 아주 시원한 URL을 가지고 있습니다 : http://www.w3.org/TR/selectors – BoltClock

+0

@BoltClock 아하나. 셀렉터가 추천에 도달했습니다. 좋은 URL':) ' –

답변

8

jQuery의 셀렉터 엔진은 또한 :contains() 의사 클래스를 구현 :

없음 의사 클래스까지 온다. It is to my knowledge jQuery와 Selenium은 같은 방식으로 구현합니다.

jQuery를 사용하지 않는 사이트에서 어떻게 테스트 할 수 있을지 모르겠지만 사이트에서는 브라우저의 JavaScript 콘솔을 실행하고 jQuery 선택기를 실행하기 만하면됩니다. 콘솔에.

여기 크롬의 자바 스크립트 콘솔이 매우 스택 오버플로 질문을보고와 예입니다 (당신은 당신이 로그인에 관계하고 있는지에 따라 다른 결과를 얻을 수 있습니다) :

> $("#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>​] 
+1

Sizzle (jquery) 또는 Slick (mootools)과 같은 많은 선택기 엔진은': contains' 선택기를 구현합니다. – c69

+0

굉장 !! 그것은 트릭을 할 것입니다. 감사. – Huliax

1

어디에도 : contains() 선택기가 표시되지 않으며 직접 발생하지 않았습니다. http://caniuse.com/#search=contain

+0

음, 확실히 Selenium에 존재합니다. 나는 그것을 사용하는 저의 앞에 코드를 가지고 있습니다. 여기를 참조하십시오 [Sauce Labs Blog] (http://saucelabs.com/blog/index.php/2010/01/selenium-totw-css-selectors-in-selenium-demystified/) – Huliax

+1

Huliax는 정확합니다. ': contains()'는 2001 년에 언젠가는 제안되었지만 2005 년에 떨어 졌던 구식 CSS3 의사 클래스였습니다. 여전히 셀레늄에서 구현되었습니다. 내 대답을 보라. – BoltClock

+0

@BoltClock에 대한 설명 주셔서 감사합니다! 나는 더 오래되고 현명합니다. –

관련 문제