Написание тестов на JS + Protractor, вопрос удобства

Всем привет! Судьба-злодейка распорядилась таким образом, что у меня появилась необходимость писать автотесты на #javascript + #protractor , а я сам из мира #java и #c-sharp::tag , поэтому мне многое непривычно и не понятно. Сейчас делаю некий прототип и всё никак не могу понять как сделать таким образом, что б WebStorm я мог через точку вызывать методы из библиотеки Protractor’a - установил всё по инструкции через npm, тесты запускаются, но когда дело идёт до написания, приходится сидеть с документацией и смотреть какие есть методы у объектов element, browser и т.д. Можно ли как-то эти методы вызывать по старинке, через точку?

Одно из отличий JS от Java и С# - динамическая типизация. а это делает сложным (ну или почти не возможным) использование контекстного автокомплита, и соответсвенно навигации по коду. (хотя тут помогает ctags)

Мой вам совет - изучите АПИ протрактора. он довольно маленький, и в общем то предсказуемый. так вы кроме названий методов еще и будете понимать как они работают. А в документацию все равно прийдется бегать довольно часто т.к. webdriverjs асинхронный, а это ох как не првычно.

1 лайк

Да уж, столкнулся с этим на текущем проекте. Непривычно.

Попробуй сразу писать на TypeScript. От асинхронности не денешься но получишь автокомплит, опциональную типизацию, и легче рефакторинг. TypeScript на выходе дает .js , так что после компиляции выполнять нужно именно его.

Я сам довольно долго уже работаю с протрактором, пиши мне в скайп (xatabu4) если что могу посоветовать чего

Ну я так и думал, просто надеялся что ребята-скриптёры что-то придумали для своего удобства, а они, оказывается, развивают память. Мило.

Мой вам совет - изучите АПИ протрактора.

Ну это само собой придётся, но обычно у меня это происходит в процессе работы, а не перед началом работы )))

Нужно рассмотреть этот вариант, я напишу в скайп за консультацией, спасибо.

Или совет прямо противоположный - не изучать тулзу, суть которой тяжеловесная обвеска вокруг селениума.
Попробуйте CodeceptJS, он позволяет писать тесты в простой манере, а также запускать их используя тот же Protractor Testing with Protractor | CodeceptJS

Если это действительно вопрос удобства, то CodeceptJS должен лучше всего вам подойти )

2 лайка

Можете обяснить разницу между синхронным и асинхронным ?

Это отсеивает 70% желающих автоматизировать на JS
Если еще написать можно как то с горем пополам, то сапортить тесты это отдельная история

1 лайк

И правильно что отсеивает. Я не вижу ни одной причины, почему автоматизация написанная на JS + Protractor даже при условии фронта на AngularJS будет хоть чем-то лучше, чем то же самое на Java или C#. Я автоматизировал приложения на Angular с Java-стеком и никаких проблем не встречал. Да, нужно понаписать кастомные вейты, которые будут ждать пока ангуляр завершит свою работу, может где-то еще какие воркараунды сделать, но ни разу ни одного блокера я не встречал. При этом написание тестов на Java/C# явно проще, отладка вообще сказка, особенно на фоне возни с промисами в этом Protractor, специалистов найти проще, в инете очень много полезной информации касаетльно автоматизации на Java/C#. В общем, я не вижу причин почему следует что-то автоматизировать на JS, может мне кто-то их покажет?

3 лайка

Я не вижу ни одной причины, почему автоматизация написанная на JS + Protractor даже при условии фронта на AngularJS будет хоть чем-то лучше, чем то же самое на Java или C#

Это официальный тул от гугла с постоянными обновлениями и поддержкой для работы с их же фрэймворком у которого при правильном подходе все работает из коробки, а Java или C# это будут сплошные костыли которые кому то потом еще поддерживать придется

Основной предлог использования JS в автоматизации это поддержка со стороны FE разработчиков и интеграция ее в FE стэк
И в этом есть смысл так как любой FE может без усилий сапортить и развивать фрэймворк и не нужно нанимать сотню хомячков

Ну да и для тех кому не поддаются промисы есть webdriver.io
Но из минусов конечно при отсутствии прямых рук JS противопоказан

1 лайк

Не из коробки, допиливать тоже нужно. Первое же с чем столкнулся - нет адекватной возможности в Protractor API работать с дропдаунами и radio buttons, понятно что написать самому несложно, но работая с тем же Serenity и Selenide писать подобных вещей не приходится и близко.

Этих костылей там аж один, который ждёт завершения работы ангуляра и гуглится в инете за секунды, во всех остальных случаях используются стандартные ожидания как и везде, повторюсь, я не испытывал никаких проблем автоматизируя ангуляр-приложение на Java + Selenide или Java + Serenity.

Которой, как правило, нет. еще один из предлогов - “у нас же фронт на JS, давайте автоматизировать тоже на JS” не выдерживает никакой криткии, при условии что автоматизаторы это не те же люди что и фронтэнд разработчики.

Мой опыт говорит что разработчикам не интересно заниматься автоматизированным тестированием - в одной из компаний на заре своей карьеры был проект на ангуляре который сами же разработчики и должны были покрывать автотестами, они довольно быстро написали фрейм и дальше всё закончилось тем, что синьоры и мидлы отказывались писать автотесты и скидывали эти задачи на джунов, а те стали уходить из компании, т.к.написание и отладка автотестов забирала порядка 70-80% их рабочего времени.

Ещё одно важное замечание - webdriver.io с последнего релиза 4.0 умеет работать синхронно, используя файберы (fibers).

Как по мне, асинхронность асинхронностью, но другая проблема JS экосистемы - это обилие вариантов и библиотек на которых можно делать автоматизацию. Только вебдрайверов там около 5и штук. И при чем официальный Selenium Webdriver JS не считается самым лучшим. А какой лучший? Смотри начало поста )

1)Тоже посчастливилось столкнуться с автоматизацей Angular приложения, и тоже не хотел protractor использовать и учить JS, но потом решился. Просто такие киллер-фичи как ожидание ангуляра и поиск по байндингам, репитерам и модели того стоят. Промисы не такая уже и страшная вещь. И плюс использованаие фич JS таких как underscore, prototype, работа с массивами и списками через map, filter, reduce очень упрощают жизнь и требует гораздно меньше кода, чем на джаве, чтобы все запрограммировать.
2)Плюс возможноть расширять прототипы и делать свои матчеры тоже дают большой буст по сравнению с джавой. Ко всему прочему protractor отлично интегрируется в сам тестируемый проект, если он на ноде, не надо городить отельный проект под автотесты, что удобно для запуска в CI по пушам в мастер.
3) Есть классные раннеры для тестов для grunt или gulp, можно создавать какие угодно сложные задания для запусков в различных окружениях.
4) Еще плюс это скорость, уже очень быстро работает даже в dockere. На джаве с самодельными ожиданиями думаю гораздо дольше времени будет занимать.

Да согласен, но для этого уже есть в инете кучу полезностей и всяких крутых библиотех в npm, рекомендую GitHub - wix-incubator/protractor-helpers: Set of matchers, locators, and helper functions for Protractor, собрано почти всё необхдимое.

1 лайк

попробуйте C# или Java клиентские библиотеки Protractor:

пример (их там не один десяток -

 [Test]
        public void ShouldDeposit()
        {
            ngDriver.FindElement(NgBy.ButtonText("Customer Login")).Click();
            ReadOnlyCollection<NgWebElement> ng_customers = ngDriver.FindElement(NgBy.Model("custId")).FindElements(NgBy.Repeater("cust in Customers"));
            // select customer to log in
            ng_customers.First(cust => Regex.IsMatch(cust.Text, "Harry Potter")).Click();

            ngDriver.FindElement(NgBy.ButtonText("Login")).Click();
            ngDriver.FindElement(NgBy.Options("account for account in Accounts")).Click();

            // inspect the account
            NgWebElement ng_account_number = ngDriver.FindElement(NgBy.Binding("accountNo"));
            int account_id = 0;
            int.TryParse(ng_account_number.Text.FindMatch(@"(?<account_number>\d+)$"), out account_id);
            Assert.AreNotEqual(0, account_id);

            int account_balance = -1;
            int.TryParse(ngDriver.FindElement(NgBy.Binding("amount")).Text.FindMatch(@"(?<account_balance>\d+)$"), out account_balance);
            Assert.AreNotEqual(-1, account_balance);
            NgWebElement ng_deposit_button = ngDriver.FindElement(NgBy.PartialButtonText("Deposit"));
            Assert.IsTrue(ng_deposit_button.Displayed);

            actions.MoveToElement(ng_deposit_button.WrappedElement).Build().Perform();
            Thread.Sleep(500);
            ng_deposit_button.Click();


...

пример (их там не один десяток -

@Test
    public void testDatePickerDirectSelect() throws Exception {
        NgWebElement ng_result;
        ng_result = ngDriver.findElement(NgBy.model("data.dateDropDownInput",
                "[data-ng-app]"));
        assertThat(ng_result, notNullValue());
        assertTrue(ng_result.getAttribute("type").matches("text"));
...

actions.moveToElement(ng_result.getWrappedElement()).build().perform();
        highlight(ng_result);
        NgWebElement ng_calendar = ngDriver.findElement(By
                .cssSelector(".input-group-addon"));
        assertThat(ng_calendar, notNullValue());
        highlight(ng_calendar);
        actions.moveToElement(ng_calendar.getWrappedElement()).click().build()
                .perform();
        seleniumDriver.manage().window()
                .setSize(new Dimension(datepicker_width, datepicker_heght));
        NgWebElement ng_dropdown = ngDriver.findElement(By
                .cssSelector("div.dropdown.open ul.dropdown-menu"));
        assertThat(ng_dropdown, notNullValue());
        highlight(ng_dropdown);
        String monthDate = "12";
        WebElement dateElement = ng_dropdown.findElements(
                NgBy.cssContainingText("td.ng-binding", monthDate)).get(0);
...

возникнут вопросы - пишите

Попробуй Selenide, апрувы что будет успех тут

Еси чо оброщатесь) сталкивались, решали, поможим

Я на селениде уже собаку съел, хороший инструмент, но это Java-библиотека, а тут проект где js необсуждаем.

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

Добрый день
Перешел с мануального тестинга в автоматизированный, компания в которой работаю пишет Ангулар, где можно найти видео с примерами тестов и сценариев на Codeceptjs?

Спасибо!

1 лайк