[삽잡이::Web] 왜 브라우저별로 css가 먹히고 안먹히느냐...

업무 특성상 Selenium을 사용할 일이 가끔 있습니다.

웹 페이지에서 요소들의 값을 가져오거나, 

input box에 원하는 값을 넣어줘야할 때가 있지요.

그런데, 이 element에 접근하기 위해 사용하는 css selector가

참으로 변덕스러운 것이 아니겠습니까?

어디에서는 먹히고, 어디에서는 안먹히고...

으어어~ 장난 지금 나랑 하냐~~ 

언제는 되는 것 같은데, 또 언제는 안되고...

특히 이놈의(?) IE가 정말...

이놈의 IE는 심지어 제가 인턴생활을 하던 시절

 비슷한 고민을 하며 내렸던 결론도 있더군요...

Web Testing 시, Selenium을 사용할 일이 많다. Selenium을 사용할 때 테스트하는  웹 브라우저 중에 IE에서 수월하게 테스팅을 하기 위해서는 사전 작업을 해야 할 것이 많다. Selenium은 Firefox 브라우저에서 extension해서 사용하는 툴이기에 Firefox 환경에서 테스트하는 것이 편하다. The Chrome and IE both need the driver to work properly, Firefox is the only browser that works out of the box with selenium

(물론, 지금 보다 더 초짜일 때 찾은 결론이라... 정확하지 않을 수도...)

심지어 더러운 코드에는 

오히려 더 CSS Selector가 안잡힌다는 소문이... 

웃고 넘길 수 있으나...

그런데, 진짜 뭔가 스파게티 이상의 스파게티 코드에서 

selector 잡기 애매하거나 진짜 이건 아니다 싶을 때도 존재한다고 한다...

더러운 코드는 요소 찾고 잡기에 힘들다구요!! 

 나부터 깔끔히 짜~!!

흠... 아무튼!!! 왜 그럴까요?! 

왜 브라우저별로, 버전별로 나를 이렇게 혼란스럽게 하는 것일까요...

우선, 브라우저별로 '레이아웃 엔진'이 다르기 때문입니다.

레이아웃 엔진이란, 렌더링 엔진이라고도 부르는데요,

웹 콘텐츠(HTML, XML 등)와 포맷 정보(CSS, XML등)를 가져와서

화면에 해당 콘텐츠를 정리하여 보여주는 소프트웨어를 뜻한다고 합니다.

(출처_ 위키백과)

쉽게 말하자면, 

요청받은 녀석들을 표현해주는 엔진을 뜻한다고 말할 수 있습니다.

또한, 브라우저별로 지원되는 버전들이 조금씩(?) 차이가 있기 때문입니다.

단적으로 IE만 보더라도 각 버전별로 지원이 되고 안되는 css selector가 존재합니다.

아래의 글은 IE 6, 7, 8 별 지원되는 CSS의 차이를 보여주고 있네요.

(참고_ CSS Differences in IE 6, 7 and 8)

selector로 지정할만한 모든 태그들이 다른 것은 아니지만,

직접 태그들을 입력해보며 먹히는지 먹히지 않는지 확인할 수도 있습니다.

(참고_ caniuse)

브라우저별로 혹은 버전별로

각각에 맞도록 대처하는 방법도 있을 것입니다만,

jQuery / JS를 사용하여 element에 접근하는 것도 하나의 방법입니다.

특히, jQuery의 경우

W3C 명세를 수용하며, CSS3 셀렉터 대부분을 지원하고 있습니다.

같은 말일 수 있겠으나, '멀티브라우저 지원' 덕분에 

어느 브라우저에서나 동일한 코드로 작동 시킬 수 있을 것입니다.

또한 사용하기 편하고, 다양한 플러그인이 존재하니

어찌 좀 사용해보고 싶지 않으십니까? 

우와~~~ 사용해보자~~~ 

물론, jQuery가 만능은 아니겠지요.

모든 상황에 맞게 적절하게 사용합시다!

즐겁게 코딩합시다~~