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

Добрый день!

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

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

Код кнопки:

<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);

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

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

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

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

  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();
    });

     });

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

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

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

Попобуйте также использовать протрактор матчеры по типу что написал я - GitHub - Xotabu4/jasmine-protractor-matchers: This module adds some matchers that will be useful for those who develop test cases with ProtractorJS

тогда вместо

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

1 лайк

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

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

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://');
				});
			};
		})

;

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

Лучше писать по-другому. 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()

Проблему выявил. Тестируемый процесс состоит из 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 в иконке не отображалось. Следовательно и криво прикреплялось к пакету на сервер.

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

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

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

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

1 лайк

Благодарю. Просто я был уверен что все отработало корректно, так как валидация на первой форме, где загрузка файлов, отработала корректно (на первый взгляд). Создал новую тему: ProtractorJS_загрузка файлов_странный случай