Selenium으로 ExtJS테스트 하기...

Selenium IDE로 ExtJS로 만들어진 Web 화면의 Action을 Recording하는데 생각보다 여기저기에서 문제점들이 발생하고 있다. 보통 레코딩이 안되는 것들이 문제들이다.

지금 프로젝트를 수행하면서 짬짬이 나온 문제들과 이의 해결 방법을 간단히 정리해 보았다.

1. ext-***의 형태로 ExtJS에서 임의로 ID를 생성하는 경우에 발생하는 문제.

Selenium IDE는 Default로 웹 페이지내 구성 Object들을 Object ID로 구분을 하여 Action을 Capture한다. 하지만 ExtJS에서는 Object를 생성시 개발자가 별도로 ID를 지정하지 않는 이상 임의로 ID를 생성하며 이는 해당 페이지를 Loading할 때 마다 달라지게 된다. 

이렇게 되면 A라는 PC에서 Recording한 파일을 다음날 다시 A라는 PC에서 Running을 한다던지 아니면 B라는 PC에서 Running을 하면 "Cannot find Error"가 발생을 해 버린다.

이는 간단히 User Extension을 이용하여 Recording의 Capture방식을 ID에서 다른 것으로 바꾸면 해결할 수 있다. 

LocatorBuilders.order = ['xpath:position', 'xpath:link', 'id', 'link', 'name', 'dom:name', 'xpath:img', 'xpath:attributes', 'xpath:href', 'dom:index'];

위 Code를 user-extension.js로 저장하여 아래와 같이 IDE Extenstion에 Loading후 Recording을 해 주면 ID가 아닌 xPath:Position으로 target을 잡아 Recording을 한다.

2. ExtJS 에서 가져온 일부 Object들이 Capture가 안되는 문제 

ExtJS를 이용한 페이지를 Recording하다 보면 일부 Object들을 Capture하지 못하는 경우가 있다. 지금까지 찾아 낸 것은 다음과 같다.

1. ExtJS TAB : Pointing이 한번에 안됨
2. Grid내 Object : CheckBox, 또는 입력 Field가 아예 Recording이 안됨.

이 역시 Click 이벤트 핸들러 대신 ClickAt 을이용한 이벤트 핸들러를 이용하면 된다. 이 역시 user-exxtension을 이용하여 Click시 ClickAt으로 바꾸어 줄 수 있다.

Recorder.removeEventHandler('click');

Recorder.addEventHandler('clickAt', 'click', function(event) {

                var x = event.clientX - editor.seleniumAPI.Selenium.prototype.getElementPositionLeft(event.target);

                var y = event.clientY - editor.seleniumAPI.Selenium.prototype.getElementPositionTop(event.target);

                this.record('clickAt', this.findLocator(event.target), x + ',' + y);

        }, { capture: true });

javaScript를 아는 분들이라면 ClickAt이 어떤 역할을 해 주는지 위 코드를 보고 알 것이다. 기존 Click은 Object를 중심으로 Recording을 했다면 ClickAt은 여기에 좌표의 개념을 더한 것이다. 좌표는 웹 페이지 내 좌표를 의미한다.

단순히 위 코드만 user-extension.js에 넣고 IDE Recording을 하면 Click이벤트가 완전히 ClickAt으로 치환되지 않고 Click과 ClickAt이 동시에 Write되는 일이 발생한다. 나는 그래서 이 코드 위에 아래 코드를 별도로 붙여서 js파일을 만들었다.

Recorder.removeEventHandler('clickLocator');

Recorder.addEventHandler('clickLocator', 'click', function(event) {

if (event.button == 0) {

this.clickLocator = this.findLocator(event.target);

}

}, { capture: true });

위는 clickLocator를 Click 이벤트 대신에 바꾸어 주는 코드인데 이 역시 단독으로 동작을 하진 않는다. (구버전에서만 돌아가는 것 같다.)  내가 테스트 해본 결과 위 두 코드가 같이 있어야 정상적으로 Click이벤트가 ClickAt이벤트로 치환이 되는것을 알 수 있었다. 

결국 전체 코드는

Recorder.removeEventHandler('clickLocator');

Recorder.addEventHandler('clickLocator', 'click', function(event) {

if (event.button == 0) {

this.clickLocator = this.findLocator(event.target);

}

}, { capture: true });

Recorder.removeEventHandler('click');

Recorder.addEventHandler('clickAt', 'click', function(event) {

                var x = event.clientX - editor.seleniumAPI.Selenium.prototype.getElementPositionLeft(event.target);

                var y = event.clientY - editor.seleniumAPI.Selenium.prototype.getElementPositionTop(event.target);

                this.record('clickAt', this.findLocator(event.target), x + ',' + y);

        }, { capture: true });

을 JS 파일에 저장하고 extension 을 해 주면 된다.