Selenium 핵심 확장(User-Extensions.js)

Selenium 핵심 확장

확장 기능을 이해하기 위해 먼저 세 가지 핵심 요소를 이해해 보겠습니다. Selenium IDEIDE에서 기록하거나 입력하는 모든 명령은 아래 세 가지 범주 중 하나에 속하며, 각 스크린샷은 해당 범주가 IDE 명령 목록에 어떻게 표시되는지 보여줍니다.

1. 액션 : UI 화면에서 어떤 작업을 수행하고 있습니까?

   

2. 접근자/어설션: 사용자 인터페이스에서 가져온 데이터에 대해 어떤 검증을 수행합니까?

   

3. 위치 파악 전략: UI에서 해당 요소를 찾는 방법.

   

Selenium IDE에는 이미 다양한 액션, 접근자, 어설션 및 로케이터 전략을 포함하는 완성도 높은 라이브러리가 함께 제공됩니다.

하지만 때때로 프로젝트에 필요한 기능이 해당 라이브러리에 없는 경우가 있습니다. 이러한 경우 사용자 지정 확장 기능을 추가하여 라이브러리를 확장할 수 있습니다. 이러한 사용자 지정 확장 기능을 라이브러리 확장 기능이라고 합니다. 사용자 확장.

예를 들어, 웹 요소에 텍스트를 입력하기 전에 대문자로 변환하는 액션이 ​​필요하다고 가정해 보겠습니다. 기본 라이브러리에는 이러한 액션이 없으므로 사용자 확장 기능을 직접 만들어야 합니다. 이 튜토리얼에서는 텍스트를 대문자로 변환하는 사용자 확장 기능을 만드는 방법을 배웁니다.

⚠️ 시작하기 전에: 여기에 설명된 워크플로는 다음 항목에 속합니다. Selenium 코어와 오리지널 Firefox-플러그인 Selenium IDE. Selenium 코어 기능은 더 이상 사용되지 않으며, 사용자 확장 기능 지원도 중단되었습니다. Selenium 병에 Selenium 3. 아래 단계와 코드는 여전히 많은 기존 Selenese 제품군이 의존하고 있기 때문에 그대로 유지됩니다. 최신 대체 방법은 이 문서의 뒷부분에서 설명합니다.

생성을 위한 요구 사항 Selenium 사용자 확장

사용자 확장 프로그램을 생성하려면 Selenium IDE를 사용하려면 기본적인 개념들을 알아야 합니다. JavaScript 특히, Java스크립트 프로토타입 객체. 아래 다이어그램은 사용자 확장 프로그램이 연결되는 두 개의 프로토타입 객체를 보여줍니다.

사용자 확장 프로그램을 만들려면 다음과 같이 작성합니다. Java스크립트 메서드를 추가하고 해당 메서드에 추가합니다. Selenium 객체 프로토타입과 PageBot 객체 프로토타입에 대해.

방법 Selenium IDE가 사용자 확장 기능을 인식합니다

사용자 확장 프로그램이 추가된 후 Selenium IDE가 시작되면 모든 기능이 해당 기능에 등록됩니다. Java스크립트 프로토타입이 로드되었습니다. Selenium IDE는 각 명령어를 이름으로 인식합니다. 따라서 다음 섹션의 접두사는 스타일 선택이 아니라 IDE가 명령어를 분류하는 방식입니다.

사용자 확장 프로그램 만드는 방법

1단계) 조치 모든 행동은 ~에서 시작됩니다 do만약 해당 동작이 텍스트를 대문자로 변환한다면, 그 동작의 이름은 다음과 같습니다. doText대문자이 액션 메서드를 추가하면 Selenium IDE 자체에서 일치하는 대기 메서드를 생성합니다. doText대문자 또한 대기 함수를 생성합니다. 텍스트대문자 그리고 기다리기이 메서드는 두 개의 매개변수를 받을 수 있습니다.

예: 대문자 텍스트 작업

Selenium.prototype.doTextUpperCase = function(locator, text) {
// Here findElement is itself capable to handle all type of locator(xpath,css,name,id,className), We just need to pass the locator text
var element = this.page().findElement(locator);

// Create the text to type
text = text.toUpperCase();

// Replace the element text with the new text
this.page().replaceText(element, text);
};

2단계) 접근자/어설션 – 모든 접근 제어자는 등록되어 있습니다. Selenium 객체 프로토타입은 접두사로 시작됩니다. 얻을 or is예를 들어 getValueFromCompoundTable 또는 isValueFromCompoundTable과 같은 메서드가 있습니다. 접근자는 대상과 테스트 케이스의 값 필드, 이렇게 두 개의 매개변수를 받을 수 있습니다. 아래 스크린샷은 확장 프로그램이 로드된 후 이러한 접두사가 어떻게 나타나는지 보여줍니다.

각 액세서리에 대해, Selenium IDE는 접두사가 붙은 해당 검증 함수를 생성합니다. 확인 단언하다, 그리고 접두사가 붙은 대기 함수가 추가됩니다. 기다려주세요.

예시: 대문자 텍스트 접근자의 경우

Selenium.prototype.assertTextUpperCase = function(locator, text) {
// All locator-strategies are automatically handled by "findElement"
var element = this.page().findElement(locator);

// Create the text to verify
text = text.toUpperCase();

// Get the actual element value
var actualValue = element.value;

// Make sure the actual value matches the expected
Assert.matches(expectedValue, actualValue);
};

Selenium.prototype.isTextEqual = function(locator, text) {
return this.getText(locator).value===text;
};

Selenium.prototype.getTextValue = function(locator, text) {
return this.getText(locator).value;
};

3단계) ​​위치 파악 전략 - 요소를 찾는 자체 함수를 만들려면 PageBot 프로토타입에 접두사가 붙은 함수를 추가하세요. 요소 찾기이 함수는 두 개의 매개변수를 받습니다. 하나는 위치 지정 문자열이고, 다른 하나는 요소를 검색할 문서입니다.

예: 대문자 텍스트 로케이터의 경우

// The "inDocument" is a document you are searching.
PageBot.prototype.locateElementByUpperCase = function(text, inDocument) {
// Create the text to search for
var expectedValue = text.toUpperCase();

// Loop through all elements, looking for ones that have
// a value === our expected value
var allElements = inDocument.getElementsByTagName("*");
// This star '*' is a kind of regular expression it will go through every element (in HTML DOM every element surely have a tag name like<body>,<a>,<h1>,<table>,<tr>,<td> etc. ). Here our motive is to find an element which matched with the Upper Case text we have passed so we will search it with all elements and when we get match we will have the correct web element.
for (var i = 0; i < allElements.length; i++) {
var testElement = allElements[i];
if (testElement.innerHTML && testElement.innerHTML === expectedValue) {
return testElement;
}
}
return null;
};

세 가지 함수를 하나의 파일에 저장하세요. 사용자 확장 프로그램.js파일은 일반 파일입니다. Java스크립트이므로 어떤 텍스트 편집기든 충분합니다.

새로 생성된 코어 확장 기능을 사용하는 방법

원래 방식에서 파일을 불러오는 것은 네 단계 작업입니다. Firefox- 플러그인 IDE. 아래 각 스크린샷은 옆에 있는 번호가 매겨진 단계에 해당합니다.

1. We Buy Orders 신청서를 클릭하세요. Selenium IDE를 클릭하고 클릭하세요. 옵션 -> 옵션…

   

2. . 일반 해당 섹션에서 새로 생성된 파일의 위치를 ​​선택하십시오. Selenium 핵심 확장 기능.

   

3. OK 다시 시작 Selenium IDE.

   

4. 명령어 목록에서 확장 프로그램을 찾을 수 있습니다.

   

Selenium 핵심 확장 기능 vs Selenium IDE 확장 기능

이 두 용어는 예전 자료에서 혼용되곤 했지만, 서로 다른 계층을 나타내는 용어이며, 사용자 정의 로직을 어디에 배치할지 결정할 때 그 차이점을 구분하는 것이 중요합니다.

요약하자면, 코어 확장 기능은 테스트의 기능을 변경하고, IDE 확장 기능은 도구의 기능을 변경합니다.

현대는 어떻게 Selenium IDE는 user-extensions.js를 대체합니다.

The Firefox-플러그인 Selenium IDE가 작동을 멈춘 시점 Firefox 웹 확장 아키텍처로 전환되었고, IDE는 크롬 기반으로 재작성되었습니다. Firefox 그리고 Edge 브라우저 확장 프로그램도 마찬가지입니다. 해당 재작업으로 인해 위에 표시된 옵션 필드가 제거되었으므로 user-extensions.js 파일을 지정할 곳이 없습니다. 동일한 기능을 제공하는 두 가지 대안이 있습니다.

• 스크립트 실행 명령. 일회성으로 Java스크립트, 추가 스크립트 실행 or 비동기 스크립트 실행 테스트에 직접 참여하여 결과를 변수에 저장합니다. 이는 간단한 사용자 지정 액션과 가장 유사한 방식입니다.
• 플러그인입니다. 재사용 가능한 명령어를 만들려면 IDE에 매니페스트를 등록하는 브라우저 확장 프로그램을 빌드하세요. 매니페스트에는 각 새 명령어를 ID, 이름, 선택적 유형 및 문서와 함께 선언하고, 새 로케이터를 선언할 수도 있습니다.

매니페스트는 공식 문서에 나와 있는 것처럼 IDE 확장 프로그램에 메시지를 전송하여 등록됩니다. Selenium IDE 플러그인 문서.

browser.runtime.sendMessage(SIDE_ID, {
uri: "/register",
verb: "post",
payload: {
name: "Selenium IDE plugin",
version: "1.0.0",
commands: [
{ id: "textUpperCase", name: "text upper case" }
]
}
}).catch(console.error);

명명 규칙은 마이그레이션 후에도 유지됩니다. 플러그인 명령은 코어 확장 기능과 마찬가지로 한 번만 선언된 후 모든 테스트에서 재사용됩니다.

널리 사용되는 확장 기능 및 플러그인 Selenium IDE

아래 추가 기능들은 기존 IDE에서 가장 널리 사용되었던 것들입니다. 흐름 제어 및 오류 발생 시 스크린샷 저장과 같은 몇 가지 기능은 현재 IDE에 내장되어 있거나 유지 관리되는 플러그인으로 제공됩니다.

이전 Selenium이 파일들을 호스팅했던 본사 다운로드 페이지는 더 이상 존재하지 않습니다. 현재 플러그인과 IDE 자체는 다음 경로를 통해 배포됩니다. Selenium IDE 프로젝트 사이트 그리고 크롬에서, Firefox 그리고 Edge 추가 기능 스토어.

를 다운로드 Selenium 이 튜토리얼에서 사용되는 핵심 확장

자주 묻는 질문