Имитировать автозаполнение jQuery с помощью команды Selenium WebDriver ExecuteScript - PullRequest
0 голосов
/ 15 февраля 2012

Примечание:

Чтобы ответить на этот вопрос, вам не нужно ничего знать о Selenium или WebDriver, только знание jQuery.Вот где мне не хватает знаний - именно поэтому я задаю этот вопрос.:-) Если вы еще не слышали о Selenium WebDriver, это просто способ автоматизации вашего сайта или веб-приложения из кода (в моем примере я использую клиентские драйверы C #).

Также обратите внимание, что в моем объекте FirefoxDriver включены собственные события

Среда:

Ниже приведен фрагмент HTML и JavaScript для ввода текста вполе ввода автоматически заполняется, когда вы начинаете печатать.Когда вы выбираете значение, оно устанавливает скрытое поле с идентификатором выбранного значения на основе имени записи, введенной в поле ввода.Моя цель состоит в том, чтобы имитировать это поведение автозаполнения в WebDriver, вызывая метод ExecuteScript для вызова некоторого кода jQuery.Но так как я знаю точное значение, которому мы пытаемся соответствовать в WebDriver, я хочу подражать тому, что конечный пользователь будет вводить в поле с этим значением.Как это может быть сделано?

Если я не могу заставить это работать, мой ответ будет состоять в том, чтобы просто установить скрытое поле непосредственно с идентификатором.Но я бы предпочел передать ему текст, чтобы я мог имитировать то, что делает конечный пользователь.Сценарий WebDriver будет иметь только часть или весь набираемый текст (значение устанавливается в ac_variation_id), и не будет иметь идентификатор записи, извлекаемый с помощью AJAX (значение устанавливается в скрытом поле Вариация_идентификатора).Ниже я устанавливаю оба значения.Тем не менее, я просто хочу сценарий jQuery, который получает идентификатор и устанавливает идентификатор, или имитирует ввод значения во вход.

Так что я должен решить его одним из двух способов:- имитация автозаполнения WebDriver 100%- заставить WebDriver вызвать скрипт JavaScript (вызов jQuery AJAX), который делает все, что делает страница, кроме ввода значения, так что для скрытого поля устанавливается идентификатор, возвращаемый для выбранной опции

Я просто не знаюкак это сделать.

Пример установки скрипта jQuery скрытого поля с идентификатором и поля ввода с текстом:

Element.SetValueById(driver, "variation_id", discount.Variation);  // set input field with text
Element.SetValueById(driver, "ac_variation_id", "123");  // set hidden field with id

        public static void SetValueById(IWebDriver driver, string tagId, string newValue)
        {
            IJavaScriptExecutor js = driver as IJavaScriptExecutor;
            js.ExecuteScript("$('#" + tagId + "').val('" + newValue + "')");
        }

HTML-код и код JavaScript для функции автозаполнения:

<link rel="stylesheet" href="http://localhost/admin/css/vanilla/jquery.ui.autocomplete.css" media="screen" type="text/css" />

<script type='text/javascript' src="http://localhost/admin/js/vanilla/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="http://localhost/admin/js/vanilla/jquery.ui.autocomplete.ext.js"></script>
<script type="text/javascript" src="http://localhost/admin/js/vanilla/jquery.ui.autocomplete.js"></script>

<input type="text"  name="ac_variation_id" id="ac_variation_id" value="" class="autocomplete" autocomplete="off" />
<button type="button" value="clear" name="cl_variation_id" id="cl_variation_id"  onclick="$('#variation_id').val('');$('#ac_variation_id').val('');"  >clear</button>
<input type="hidden" name="variation_id" id="variation_id" value="" />

<script>
    $('#ac_variation_id').autocomplete({ 
        ajax: 'http://localhost/admin/discount/ajax-auto-complete/variation',
        match: function(typed) { 
                return this.name;//.match(new RegExp("^"+typed, "i")); had to comment that out to be able to type integration_id and display name 
        },
        insertText: function(entity) { 
                return entity.name +' '+ (( entity.integration_id == undefined ) ? '' : entity.integration_id);
        }
    }).bind("activate.autocomplete",function(e, entity){

        var id = '#'+($(this).attr('id').substring(3));//remove ac_ prefix
        $(id).val( entity.id );
    });
</script>

Снимок экрана значений автозаполнения для поиска после ввода текста в поле ввода:

enter image description here

Ответы [ 3 ]

1 голос
/ 14 марта 2012

Есть две вещи, которые нужно проверить с помощью виджета автозаполнения: 1) ввод в текстовое поле и 2) выбор элемента из списка автозаполнения.

Эти ответы в рубине, но я подозреваю, что тамсоответствующая версия C #

Ввод в текстовое поле

search_term = "stackoverflow.com"

input = find('#q')
input.click

# this is the same as input.set(search_term[0..5]) I believe
search_term[0..5].chars.each do |key|
    input.native.send_key(key)
end

Выбор элемента из списка автозаполнения (по тексту элемента)

search_term = "stackoverflow.com"
selector = ".ui-menu-item a:contains(\"#{@search_term}\")"
page.execute_script " $('#{selector}').trigger(\"mouseenter\").click();"

# I have 4 auto completes on my page, so I just wait until they all gone
wait_until do
    autocompletes = all(:css, '.ui-autocomplete')
    autocompletes.inject(true) { |x,autocomplete| x && !autocomplete.visible? }
end
0 голосов
/ 26 апреля 2012

Используя IDE Selenuim и экспортируя в код Java, я адаптировал результаты к следующей функции, чтобы я мог выбрать, какой из моих списков автозаполнения изменить.(Это также в базовом классе, который расширяет все мои PageObjets.

public BasicPage selectComboBox(int buttonIndex, String selection) {
  driver.findElement(By.xpath("(//button[@type='button'])[" + buttonIndex + "]")).click();
  driver.findElement(By.xpath("//html/body/ul/li/a[. = \"" + selection + "\"]")).click();

  // delay till the selected element is visible
  WebElement duh = (new WebDriverWait(driver, 10)).until( visibilityOfElementLocated(By.xpath("(//button[@type='button'])[" + buttonIndex +"]" )) ) ;     

  return this;
}
0 голосов
/ 15 февраля 2012

Я не мог имитировать автозаполнение и выбор опции, поэтому я вызываю запрос JSON GET, чтобы получить идентификатор скрытого поля, и устанавливаю скрытое поле в соответствии с первым, которое оно находит (если их больше одного).

Element.SetHiddenFieldIdViaAutoCompleteJSON(driver, "/admin/discount/ajax-auto-complete/variation", "val", discount.Variation, "id", "variation_id");

public static void SetHiddenFieldIdViaAutoCompleteJSON(IWebDriver driver, string requestPage, string queryParam, string queryParamValue, string jsonObjectProperty, string hiddenFieldId)
{
    IJavaScriptExecutor js = driver as IJavaScriptExecutor;
    js.ExecuteScript("$.ajax({ url: '" + Config.SITE_URL + requestPage + "',data:{'" + queryParam + "':'" + queryParamValue + "'},dataType:'json',type: 'GET',contentType: 'application/json',success: function(jsonObject) { $('#" + hiddenFieldId + "').val(jsonObject[0]." + jsonObjectProperty + "); } });");
}
...