후기 - CSS 및 HTML 프런트 엔드 코딩의 자동화 된 테스트




클론코딩이란 (4)

저는 프론트 엔드 개발자로서 CSS, HTML, Javascript (그 순서대로)를 코딩하고 있으며 대부분 제가하는 일은 디자인 리드입니다. CSS로 작성한 디자인 의 품질은 주관적이지만 코딩의 대부분은 순전히 기능 / 레이아웃이며 내 페이지의 테스트를 자동화하는 데는 어떤 방식 으로든 관심이 있습니다.

내 질문은 두 부분으로 나눌 수 있습니다.

  1. 누구나 CSS 나 HTML을 자동으로 테스트하기위한 기존 기술이나 제안이 있습니까? 특히 브라우저 간 호환성에 관해서 는요?

  2. CSS는 레이아웃을 제어하는 ​​속성과 디자인을 제어하는 ​​속성으로 크게 나눌 수 있으므로 레이아웃에 대한 자동화 된 테스트 만 가능 합니다 (예 : 색상 이 올바른지 자동적으로 그리고 가치있게 테스트 할 수 없음)? 그렇다면 부울 허용 테스트에 적합한 CSS 값의 종류는 무엇입니까?

다음은 테스트 할 수있는 부울 값의 초기 값입니다. 다른 값이 있어야합니다.

  • 팝업이 다른 콘텐츠 (z-index) 위에 표시됩니까?
  • 바닥 글이 다른 모든 내용을 지우는가 (float)

당신의 도움을 주셔서 감사합니다. 그 질문의 세 번째 부분은 물론 "나는이 길로 내려가는 시간을 낭비하고 있는가?"입니다.

***** 편집하다 *****

나는이 기사에서 내가 물어 보았던 질문과 똑같은 질문을하지만 더 깊고 어쩌면 좀 더 설득력있는 질문을한다.

http://www.morethanseven.net/2008/10/13/unit-testing-css-looking-solution/

앞으로 나는 CSS만으로 기능적인 오류를 일으키는 작업을 몇 가지 예제로 분리하려고 노력하고 있습니다. 그러나 지금까지 발견 한 것들은 JS CSS를 결합한 버그입니다. 나는 여전히 이러한 종류의 오류를 자동으로 테스트하고 싶지만 자바 스크립트를 사용하면 내 원래 질문의 범위를 넘어선 것을 알 수 있습니다.

***** 2 편집 *****

나는이 문제를 해결하는 방법에 대해 블로깅을 해왔다.

http://blog.ajcw.com/2010/12/automated-css-testing-or-how-one-css-coder-is-now-responsible-for-breaking-%E2%80%93-and-fixing-%E2%80%93-the-build/



w3 유효성 검사 및 Adobe Browser Labs 가이 문제에 대해 제공 할 수있는 최상의 솔루션입니다. 뒤로 UI 레이아웃과 디자인을 할 때 (읽기 = cutup 원숭이)는 내 두 명의 가장 친한 친구였습니다.

실제로 무언가가 어떻게 보이는지 테스트를 자동화 할 수있는 방법은 없습니다. 그래서, 당신은 시각적으로 모든 것을 직접 검사하거나 똑같은 일을하는 테스터에게 crowdsourcing (또는 insourcing)을합니다. 재미 있지는 않지만 프론트 엔드 녀석들을 사업에서 지켜줍니다.

좋은 소식은 많은 브라우저가 렌더링 엔진을 공유한다는 것입니다. 따라서 Chrome에서 올바르게 테스트하면 Safari에서 정상적으로 작동 할 것입니다. Firefox와 IE를 체크인하면 90 %의 문제가 해결됩니다. 그런 다음 당신 (또는 당신의 보스)이 얼마나 까다 롭고 그에 따라 테스트하고 싶은지 결정하십시오.


Selenium 살펴보십시오. 브라우저 기반의 자동화 된 테스트 도구입니다. 나는 그것이 당신이 찾고있는 것이라고 생각합니다.

모든 브라우저에서 작동합니다 (테스트 스크립트를 만들기 위해 Firefox에 IDE가 있지만 모든 브라우저에서 스크립트 자체를 실행할 수 있음)

그것은 스크립트의 어느 시점에서나 예상되는 출력에 대해 DOM 등의 내용을 테스트 할 수있게합니다.


회귀 테스트를 위해 만들어진 도구를 찾고 있다면 다음을 확인하십시오.

https://github.com/bfirsh/needle

기본적으로 선택한 부품의 스크린 샷을 찍어 (예제를 확인) 비교합니다. 서로 너무 다르면 테스트가 실패합니다. Selenium을 사용하기 때문에 z-indizes, font-size 등과 같은 다른 어설 션을 확인할 수 있습니다.





automated-tests