Какой выбрать подход к описанию тестового фреймворка на JS

webdriver
, , , ,
#1

Я только начинаю покорять автоматизацию. На проекте, где я работаю, просят покрыть автотестами веб приложение используя JS.

Исследовав вопрос автоматизации на JS было решено остановиться на связке Webdriver + JS + Mocha. Также решено применять Page Object.

Интернет предлагает два варианта создания структуры фреймворка.

  1. Использовать классы и методы.
class HomePage extends BasePage {

    clickOnAdoptionLink() {
        driver.findElement(By.css(locator)).click();
    }
}
  1. Использовать функции.
var Page = function() {

    this.driver = new webdriver.Builder()...;
    var driver = this.driver;

    this.visit = function(url){
        return driver.get(url);
    }
}

Хотелось бы спросить у бывалых автоматизаторов, какой из подходов использовать правильнее?

Заранее спасибо за любые советы.

#2

Использование классов более привычно для ООП, а так нет особо большой разницы, если не влезать в глубокие дебри прототипирования. Да и на текущий момент, декларирование класса - это лишь синтаксический сахар, т.к. на деле создается функция:

➜  ~ nvm use 10
Now using node v10.13.0 (npm v6.4.1)
➜  ~ node
> class BasePage {
... }
undefined
> 
> class HomePage extends BasePage {
... 
...     clickOnAdoptionLink() {
...         driver.findElement(By.css(locator)).click();
...     }
... }
undefined
> 
> BasePage
[Function: BasePage]
> HomePage
[Function: HomePage]

Но в целом, для общего развития понимание того, как работает прототипное наследование в JavaScript не помешает, но и не блокирует написание тестов.

1 лайк
#3

Спасибо большое за совет.

#4

Если двигаться в сторону ООП, тогда лучше и не чистый JS брать, а Typescript. Начинающему будет весьма неприятно тратить по полдня в поисках ошибок в названии методов. :slight_smile:

Изобретать велосипед с чистым WebDriver тоже не рекомендовал бы, если нет опыта, а время - поджимает. Да и с асинхронным кодом придется помучаться.

Если еще есть возможность сменить вектор, посмотрите в сторону связки: typescript, webdriverio, mocha-typescript, chai, allure2.

Тесты с PageObjects будет писать повеселей (как на Java). Классический пример с авторизацией:

@suite
class AuthorizationTests {
  @testCaseId('5')
  @severity(SeverityLevel.CRITICAL)
  @story('Basic sign in implementation')
  @data(testData())
  @data.withCustomTestName(user => `${user} should be able to sign`)
  public userShouldBeAbleToSignIn(user: User) {
    open(LoginPage)
      .loginWith(user)
      .select(ProfilePage);

    verifyThat(atProfilePage)
      .fullNameIs(user.fullName)
      .usernameIs(user.username);
  }
}

export default class LoginPage extends Page {
  @step(user => `Log into ${user.role} user account.`)
  public loginWith(user: User): ProfilePage {
    return this.fillInUsername(user.username)
      .fillInPassword(user.password)
      .clickSignInButton();
  }

  @step(username => `Fill in username: ${username}.`)
  public fillInUsername(username: string): LoginPage {
    $('input[data-qa=username]').setValue(username);
    return this;
  }

  @step(password => `Fill in password: ${password}.`)
  public fillInPassword(password: string): LoginPage {
    $('input[data-qa=password]').setValue(password);
    return this;
  }

  @step('Click "Sign In" button.')
  public clickSignInButton(): ProfilePage {
    $('input[data-qa=signIn]').click();
    return at(ProfilePage);
  }
}
2 лайка
#5

Я бы предложил взять codeceptJs на базе puppeteer
Не нужна инициализация браузера, если говорить об апи, то даже не нужно либу отдельную подключать
Встроенные моки и прокси
И если так нравится page object, здесь его тоже можно юзать

А вообще смотрите проект фронта, там на процентов 80% все разбито на компоненты, такой же подход можно сделать и у себя: есть наборы контролов и компонентов, на базе этих контролов и компонентов строятся view. Научился работать с контролами, научился работать с view

1 лайк