JavaScript Классы: хранение переменных в конструкторе против методов get - PullRequest
Новая
       5

JavaScript Классы: хранение переменных в конструкторе против методов get

0 голосов
/ 13 февраля 2020

Итак, я работаю над Automation Framework, используя шаблон объектной модели страницы, а также Cypress (который написан на JavaScript).

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

Я буду ссылаться на эти локаторы ниже в классе в более крупных методах (которые объединяют несколько элементов и что-то с ними делают). Однако я не уверен, что лучший способ их хранить.

На ум приходят два варианта (Я не эксперт в JavaScript, так что может быть лучше. В любом случае есть ..

Вариант 1 : (Магазин они в простых GET-методах, например, так: 

saveButton() {
    return cy.contains('Save')
}

nameField() {
    return cy.get('.form-control[name="name"]')
}

descriptionField() {
    return cy.get('.form-control[name="description"]')
}

Затем, когда мне нужно получить доступ к локатору, я просто вызываю nameField().type() или saveButton().click() ниже в классе более крупных методов (хотя я предполагаю, что я буду перед ними нужно добавить this.

Другой вариант будет выглядеть примерно так, используя конструктор:

Опция 2 : (используйте конструктор) 

class WidgetForm extends PageObject {
    constructor() {
        this.saveButton = 'Save'
        this.nameField = '.form-control[name="name"]'
        this.descriptionField = '.form-control[name="description"]'
    }
//...more code further down that uses these values

Затем я могу ссылаться на них аналогичным образом, например cy.get(this.nameField).type(), хотя, полагаю, я мог бы также сохранить всю командную функцию Cypress в значении конструктора, например:

this.nameField = cy.get('.form-control[name="name"]') (По крайней мере, я предполагаю).

Есть ли какое-то конкретное преимущество для обоих? I wi sh JavaScript допускает постоянные частные значения, хранящиеся в классах, похожих на другие языки (я знаю, что это происходит в ES7, но я хотелось бы придерживаться того, что работает сейчас).

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

1 Ответ

2 голосов
/ 13 февраля 2020

вариант 1 выглядит хорошо для меня, организация более интуитивна, и, на мой взгляд, конечный результат выглядит лучше. 

Class WidgetForm {

    nameField() {
        return cy.get('.form-control[name="name"]')
    }

}

тогда в ваших тестах: 

beforeEach(function () {
  WidgetForm.nameField().type({"Smith"})
})

не уверен если вы имели в виду это для второго предложения, но вы можете использовать геттер: 

Class WidgetForm extends PageObject{
    constructor() {
        this.saveButton = 'Save'
        this.nameField = '.form-control[name="name"]'
        this.descriptionField = '.form-control[name="description"]'
    }
    get nameField() {
        return cy.get(this.nameField)
    }
}
...