ProtractorJS_В автотесте пропадает у элемента путь (клик по кнопке не работает)

protractor
testng
protractorjs
Теги: #<Tag:0x00007fedc21b1518> #<Tag:0x00007fedc21b0f78> #<Tag:0x00007fedc21b06b8>

(Алексей Щербин) #1

Добрый день!

После обновления подрядчиками алгоритма роботы кнопки на сайте, у меня стал падать тест. Ранее все работало. Была внесена логика такая, что кнопка должна быть всегда активна (ранее она ставала видимой только после заполнения всех требуемых полей валидными значениями). По нажатию на нее, в случае не заполненных обязательных полей, выводится подсветка под требуемыми полями с информацией к заполнению.

Так вот. Набор селектор подобран верно. Тест доходит до кнопки, жмет и как-бы идет дальше по сценарию, но визуально я вижу, что никуда оно не переходит. И тест падает. Я пробовал ставить слипы перед нажатием на кнопку и самостоятельно щелкать в браузере - кликается вхолостую (другие кнопки работают). Вопрос, в чем может быть проблема?! Пошел второй день как я бадаюсь с этим. Подрядчики молчат.

Код кнопки:

<button class="col-md-12 text-uppercase btn btn-lg btn-default btn-success ng-binding" type="button" ng-click="submitSecondStep()">Далі
				</button>

PageObject:

this.buttonNextToStep3 = function() {
		return element(by.cssContainingText('.col-md-12.text-uppercase.btn.btn-lg.btn-default.btn-success.ng-binding', 'Далі'));
	};

Код теста:

browser.actions().mouseMove(element(by.css('body > div > div > footer > div.footer-small.ng-scope > div > div > div.tel-block > a > span'))); //навел курсор на нижний элемент на странице, думал проблема с тем что элемент не виден
browser.sleep(1000);
formStepTwo_page.buttonNextToStep3().click(); //после этой команды не происходит переход дальше. Тест завершается успешно, так как по сути клик состоялся. но тест рушится на шаге ,который должен быть далее
browser.sleep(10000);

(Artur Korobeynyk) #2

У вас добавились элементы на странице, которые будут описывать неверно введенные данные при заполнении формы. Проверьте что css path к кнопке остался прежним. Возможно клик теперь осуществляется по какому-то инфо полю.


(Алексей Щербин) #3

CSS путь взят в момент когда все поля заполнены валидными значениями (он менялся). Клик визуально происходит, но переход на след. страницу не осуществляется. Даже при слипе в автотесте я мышкой кликаю по кнопке и ничего не происходит (другие кнопки работают).


(Алексей Щербин) #4

Я пробовал и ExpectedCOnditions использовать. Безтолку, код отрабатывает корректно, но на фронт кнопка не отрабатывает. Я предполагаю, что просто не отрабатывает по какой-то причине условие на кнопке, что если все поля заполнены валидными значениями, то должно выполнятся действие перехода дальше, а не подчеркивание незаполненного поля.


(Oleksandr Khotemskyi) #5

Проверьте ваши тестовые данные. Такое же поведение при заполнении тех же данных руками?


(Ирина Ф) #6
  1. первый it наводим на элемент и ждем появление кнопки. например,
    it('should mouse enter on footer', function() {
    actions.mouseEnter(element(by.css('.page-body'))).then(function(){
    expect(element(by.css('#register-btn')).waitReady()).toBeTruthy();
    expect(element(by.id('login-btn')).waitReady()).toBeTruthy();
    });
    });

actions.mouseEnter - функция, в которую передается элемент: mouseEnter: function(element) {
return browser.actions().mouseMove(element).perform();
},

  1. второй it клик на кнопку, например,
    it('should click on login button', function() {
    element(by.id('login-btn')).click().then(function(){
    expect(browser.getCurrentUrl()).toContain('connect/consumer');
    expect(element(by.cssContainingText('[data-ui-sref="connect.restore.form"]', 'Forgot Your Password?')).waitReady()).toBeTruthy();
    });

    });


(Oleksandr Khotemskyi) #7

Покажите так же реализацию функции .waitReady()


(Ирина Ф) #8

извините, забыла.


подключаете перед describe
работает лучше, чем browser.sleep(10000);
sleep использую в редких случаях. например, когда нужно подождать обработку файла для поиска.


(Oleksandr Khotemskyi) #9

Попобуйте также использовать протрактор матчеры по типу что написал я - https://github.com/Xotabu4/jasmine-protractor-matchers

тогда вместо

expect(element(by.cssContainingText('[data-ui-sref="connect.restore.form"]', 'Forgot Your Password?')).waitReady()).toBeTruthy();

Получается -

let forgotPasswordElem = element(by.cssContainingText('[data-ui-sref="connect.restore.form"]', 'Forgot Your Password?'))
expect(forgotPasswordElem).toAppear(10000, 'Expecting forgot password element to be visible after 10000 seconds, but it wasnt')

Возможно так будет проще чем патчить ElementFinder


(Алексей Щербин) #10

При заполнении руками тех же данных все проходит успешно. Но автотест падает.


(Алексей Щербин) #11

Понял, благодарю. Буду пробовать.
Такой код НЕ сработал:

var EC = protractor.ExpectedConditions;
		browser.wait(EC.visibilityOf(formStepTwo_page.buttonNextToStep3()), 5000).then(function(result) {
			if(result) {
				formStepTwo_page.buttonNextToStep3().click().then(function() {
				expect(browser.getCurrentUrl()).toEqual('https://');
				});
			};
		})

;


(Oleksii Ihnatiuk) #12

Не знаю насчет протрактора, но иногда помогает заменить команду click() на submit()


(Oleksandr Khotemskyi) #13

Лучше писать по-другому. WebDriver ControlFlow тут сам выстроит цепочку промисов в правильной последовательности.

let EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(formStepTwo_page.buttonNextToStep3()), 5000)
formStepTwo_page.buttonNextToStep3().click()
expect(browser.getCurrentUrl()).toEqual('https://')

К сожалению так очень сложно сказать почему ваш клик не отрабатывает.
Я вижу несколько вариантов куда смотреть

1) Поля заполнены не так как нужно и валидация не пропускает. Это может быть по разным причинам - невалидные тестовые данные, форма сделана с хитрой версткой в которой некоторые события не проходят и т.д.
2) С валидацией все хорошо, но сам клик по кнопке не проходит.
3) Черная магия, полнолуние, кривая верстка, ошибки на сайте.

Я бы сделал так -
Попробовал бы запустить трактор через protractor --elementExplorer, и попробовать покликать по разному на элемент.

Посмотреть браузерные логи - возможно там падают js ошибки в течении теста?

Убедится что в тестовых данных нигде не затесались переносы строк, всякая муть, и кривые значения

Попробуйте покликать через .click(), клик через JS, или вызвать .submit()


(Алексей Щербин) #14

Проблему выявил. Тестируемый процесс состоит из 3 шагов с формами (тестируемая кнопка в конце второго шага). На первом шаге есть поля с загрузкой файлов. Я их решил, но увидел что хоть валидатор полей и пропускает, но на бекенд они не отправляются. Оказывается, кнопка, которая в конце второго шага, не давала идти со второго шага на третий из-за того что срабатывал скрипт валидатор полей с первой формы. Шаги с формами находятся на разных страницах. Связь с бекендом и переход на след. форму происходит после нажатия на кнопку в конце каждого шага с формой.

Теперь буду бадаться вновь с загрузкой файлов, так как она была побеждена так:

//фото 1
var fileToUploadMyPhoto = path.resolve(__dirname, 'D:/Miloan_ua/Protractor_testcase/photo_for_tests/1.0.jpg');
//фото 2
var fileToUploadRegistrationPhoto = path.resolve(__dirname, 'D:/Miloan_ua/Protractor_testcase/photo_for_tests/2.0.jpg');
		
$('input[type="file"]').sendKeys(fileToUploadMyPhoto);
browser.sleep(1000);
$('input[type="file"]').sendKeys(fileToUploadRegistrationPhoto);
browser.sleep(1000);

Их два, так как поля два. Загружало по очереди в каждое. Это единственный вариант реализации кода ,который у меня заработал. но заработал криво, так как хоть в строке адреса и прописалось название файла, но preview в иконке не отображалось. Следовательно и криво прикреплялось к пакету на сервер.


(Oleksandr Khotemskyi) #15

Собственно я так и предположил -

Вы не заполнили часть данных и выявили ошибку в приложении.

Если у вас есть потребность загружать файлы, и вы планируете в будущем использовать грид\селениум сервер на другой машине - посмотрите так же на FileDetector -
https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/input_exports_FileDetector.html

Пример использования:


(Алексей Щербин) #16

Благодарю. Просто я был уверен что все отработало корректно, так как валидация на первой форме, где загрузка файлов, отработала корректно (на первый взгляд). Создал новую тему: http://automated-testing.info/t/protractorjs-zagruzka-fajlov-strannyj-sluchaj/13322