전에 크로스 브라우져 테스트를 할 수 있는 서비스로 BrowserStack을 소개한 적이 있었는데 오늘 소개할 Sauce Labs도 동일한 서비스로 볼 수 있다. 최근에 프론트앤드 작업을 하다보니 아무래도 크로스 브라우징 테스트가 필요해서 Sauce Labs를 사용하고 있는데 아직까지는 상당히 만족하고 있다.

크로스 브라우징 테스트

Sauce Labs는 가상 머신을 통해서 다양한 플랫폼과 브라우저의 조합을 쉽게 테스트해 볼 수 있게 해주는 서비스다. 서비스 자체의 사용방법은 아주 간단하다. 무료로도 이용할 수 있는데 가입을 하면 아래 화면에 나오듯이 수동으로 직접 실행하는 경우에 30분을 주고 자동화 테스트에 Win, Linux, 안드로이드등에 200분이 할당되고 Mac/iOS에 40분식 나누어서 할당된다. 처음에 기능을 확인해 보기에는 충분하고 회사에서는 결재를 해서 쓰고 있기 때문에 결재자에게 한정된 것인지 모르겠지만 테스트를 계속 수행하다보니 보너스라서 시간을 계속 준다. 왠만한 회사에서는 월 12불 정도로도 충분해 보인다.(무료는 동시에 실행할 수 있는 세션이 2개로 제한된다.)

로그인한 화면에서 우측상단의 아이콘을 클릭하면 접속할 URL과 사용할 플랫폼/브라우저 조합을 선택해서 실행할 수 있다. 보다시피 테스트 대상이 될만한 대부분의 플랫폼과 브라우저가 준비되어 있다.

실행하면 약간의 로딩시간(내부에서 가상 머신을 띄우는 시간) 후에 앞에서 입력한 URL로 접속한 화면이 나타나게 된다. 별도의 프로그램 없이 브라우저내에서 실행해 볼 수 있기 때문에 편하고 이는 원격조작을 하는 것이기 때문에 브라우저를 띄운 뒤에 (약간은 느리지만) 조작을 하거나 새로운 탭등을 띄우는 작업도 가능하다. 그냥 원격으로 붙어서 작업한다고 생각하면 된다. iOS나 안드로이드 같은 경우는 시뮬레이터로 실행이 된다. 실제 장비는 아닌 점은 아쉽지만 가상머신으로 다룰 수 있으려면 어쩔 수 없는 선택으로 보이고 브라우저를 테스트하기에는 무리가 없어 보인다. 상단의 메뉴바를 통해서 새로운 세션을 띄우거나(앞에서 처럼 다시 플랫폼과 브라우저를 실행해서 띄운다.) 해당 화면을 다름 사람한테 공유할 수도 있다.(공유 기능은 많이 쓸지는 잘...)

사용자의 대시보드 화면해서는 테스트했던 기록이 위처럼 나오고 좌측에는 현재 실행되고 있는 상태나 남은 시간등이 나타난다. 실행했던 기록도 볼 수 있는 있는데 클릭을 하면 다음과 같이 테스트한 세션의 정보가 나타나고 실행한 액션과 마지막 스크린샷을 볼 수 있고 전체 실행과정을 녹화된 비디오로도 볼 수 있다.

터널링

일반적으로 개발하는 프로세스를 생각하면 개발자 PC의 로컬에 서버가 떠있거나 내부망에만 떠있는 경우가 대부분이다. 이는 외부에서 접속할 수 없는 경로 이므로 외부에서 테스트하기 어려운데 그러한 상황을 위해서 터널링 기능을 제공한다.(이는 BrowserStack도 제공하는 기능이다.) 터널링 안내 페이지에 가면 자세한 안내를 볼 수 있는데 jar파일로 터널링 프로그램을 제공하므로 플랫폼에 상관없이 모두 사용할 수 있고 당연히 80 혹은 443 포트는 외부로 열려있어야 가능하다.

터널링 프로그램을 위처럼 사용자계정명과 API키(로그인하면 좌측에서 볼 수 있다.)로 실행하면 터널링 연결을 시도하고 "Connected! You may start your tests."라는 메시지가 나오면 성공한 것이다.

이제 Sauce Labs 사이트에 가면 우측 상단에 터널링이 연결되었다는 표시로 아이콘이 녹색으로 바뀐 것을 불 수 있다. 터널링이 연결된 후에는 개발자 PC 로컬에서 접속할 수 있는 localhost나 다른 내부 URL을 통해서 사이트에 접속해서 테스트를 할 수 있다.