Автор оригинала: John Kennedy.
Прошло довольно некоторое время, так как я обещал сделать третью часть на страницах NightWatch.js. Я хочу поблагодарить Мариссу, которая вышла из ее занятого графика, чтобы добраться до меня об этой части учебника. В последнее время у меня было много на моей тарелке, поэтому я не написал через три месяца. Я сожалею о том, что.
Двигаться дальше …
В этой статье я собираюсь поговорить о Страница объектов Отказ Без дальнейшего ADO начнется.
Примечание: большинство вещей, которые я пишу здесь, – это то, что вы найдете в документации NightWatch.js.
Что такое объект страницы?
Объект страницы позволяет программному клиенту что-либо делать и увидеть что-то, что человек может отстраивать основные действия HTML, необходимые для доступа и манипулирования страницей.
Комплексное введение в объекты страницы можно найти в этом Статья Отказ
Настроить объекты страницы
Для того, чтобы настроить объекты страницы в Nightwatch, нам нужно добавить Page_Objects_Path недвижимость нашему Nightwatch.json файл. Если вы посмотрите на него сейчас, вы увидите, что мы сделали это уже.
Если это не так, продолжайте и добавьте его на Nightwatch.json Конфигурация файла. Мы присваивали «Страницы» к Page_Objects_Path Свойство на нашем конфиге. Делая это, мы говорим Nightwatch, чтобы прочитать объекты страницы из папки (или папок), указанных в Page_Objects_Path свойство конфигурации.
Вы также можете пройти массив папок в Page_Objects_Path Свойство, позволяющее разделить объекты страницы на более мелкие группы.
Существует несколько свойств, подверженных использованию, когда мы используем объекты страницы, и мы посмотрим на них в ближайшее время.
URL-недвижимость
Это свойство необязательно. При условии, он обозначает URL страницы. Позвоните в навигация Метод на объекте страницы для навигации на странице.
URL обычно определяется как строка:
export default {
url: 'https://cjdocs.herokuapp.com',
};
Вы также можете пройти функцию к нему, в случае динамического URL. Одним из употреблений, когда вы хотите поддержать разные тестовые среды. Вы можете создать функцию, которая вызывается в контексте страницы, что позволяет сделать:
export default {
url: function() {
return this.api.launchUrl + 'auth/signin';
},
};
Свойство элементов
Элементы Свойство используется для определения элементов на вашей странице, что ваши тесты будут взаимодействовать с помощью команд и утверждений. Это помогает сохранить ваш код сухим, особенно в больших тестах интеграции.
Нам не нужно звонить UsexPath или USECS В наших тестах для переключения между стратегиями «Найти», поскольку это сделано внутри для нас. По умолчанию Локатестратегия Установлено на CSS, но вы также можете указать XPath:
export default {
elements: {
searchBar: {
selector: 'input[type=text]'
},
submit: {
selector: '//[@name="q"]',
locateStrategy: 'xpath'
}
}
};
Вы можете использовать STONDHAND, если вы создаете элементы с той же стратегией поиска по умолчанию:
export default {
elements: {
searchBar: 'input[type=text]'
}
};
Используя Элементы Свойство, мы можем обратиться к элементу путем префикса «@» на его имя, а не селектор, при вызове элементов команд и утверждений (например, Нажмите , и т. Д.).
Один вариант – определить массив объектов:
var sharedElements = {
mailLink: 'a[href*="mail.google.com"]'
};
export default {
elements: [
sharedElements,
{ searchBar: 'input[type=text]' }
]
};
Свойства секции
Разделы Свойство позволяет определить разделы страницы. Это может быть полезно для двух вещей:
Создание раздела выглядит так:
export default {
sections: {
menu: {
selector: '#gb',
elements: {
mail: {
selector: 'a[href="mail"]'
},
images: {
selector: 'a[href="imghp"]'
}
}
}
}
};
Примечание: каждая команда и утверждение на раздел (кроме ожидать Утверждения) Возвращает этот раздел для цепочки. При желании, Вы можете гнездиться разделами под другими разделами для сложных структур DOM .
Свойство команд
Команды Свойство позволяет добавлять команды на свой объект страницы. Это полезный способ инкапсулировать логику о странице, которая в противном случае будет жить в тесте или нескольких тестах.
Nightwatch позвонит команде в контексте страницы или раздела. Вы можете назвать команды клиента, такие как пауза через this.api Отказ При цепочке каждая функция должна вернуть объект страницы или раздел.
Ниже пример использует команду для инкапсуляции логики для нажатия кнопки «Отправить»:
const googleCommands = {
submit: function() {
this.api.pause(1000);
return this.waitForElementVisible('@submitButton', 1000)
.click('@submitButton')
.waitForElementNotPresent('@submitButton');
}
};
export default {
commands: [googleCommands],
elements: {
searchBar: {
selector: 'input[type=text]'
},
submitButton: {
selector: 'button[name=btnG]'
}
}
};
Это все свойства доступны для объектов страницы. Теперь пришло время мы видим некоторые из этих свойств в действии. Ура! Я буду использовать мою “все еще в приложении” здесь Отказ
Написать тесты
Я проверю знак на странице приложения. Давайте идти вперед и сделаем только это. Нам нужно будет создать файл страницы в Страницы Каталог, который мы создали ранее. Я позвонил мою signimpage.js и добавил его к Страницы каталог.
signimpage.js :
const signinCommands = {
signin(email, password) {
return this
.waitForElementVisible('@emailInput')
.setValue('@emailInput', email)
.setValue('@passwordInput', password)
.waitForElementVisible('@signinButton')
.click('@signinButton')
}
};
export default {
url: 'https://cjdocs.herokuapp.com/auth/signin',
commands: [signinCommands],
elements: {
emailInput: {
selector: 'input[type=email]'
},
passwordInput: {
selector: 'input[name=password]'
},
signinButton: {
selector: 'button[type=submit]'
}
}
};
Далее мы создаем другой объект страницы под названием InstanceScage.js Отказ Это будет использоваться для абстрагирования того, что мы будем искать, когда тест пропускает фазу аутентификации.
InstanceScage.js :
export default {
elements: {
homepageWelcomeTitle: {
selector: '//div/h1',
locateStrategy: 'xpath'
}
}
};
Наконец, мы создадим наш тестовый файл, называемый signin.spec.js Отказ signin.spec.js :
'User can sign in'(client) {
const signinPage = client.page.signinPage();
const instancesPage = client.page.instancesPage();
signinPage
.navigate()
.signin(process.env.EMAIL, process.env.PASSWORD);
instancesPage.expect.element('@homepageWelcomeTitle').text.to.contain('Welcome to the CJDocs Home!');
client.end();
}
После этого вы можете запустить тесты с помощью команды NPM Test или Тест пряжи Отказ
Это все, что есть использовать объекты страницы. Я полагаю, не так сложно?
Заключение
Объекты страницы Действительно помогают сделать наш код сухим, тем самым отсудив некоторые общие функции в одном месте и просто вызывая определенные методы/свойства, поэтому мы можем иметь полностью функциональные тесты без повторяющегося кода.
Я надеюсь, что вы узнали что-то новое сегодня. Нажмите кнопку «Нравится», если вам это наслаждается. Дайте мне знать в комментариях, если у вас есть вопрос или если вы хотите, чтобы я провел что-то.
Что бы вы хотели, чтобы я написал? Если у вас есть что-то в виду, что вы хотели немного узнать сейчас, удари меня в DM, и я обязательно отвечу.
Вы можете найти меня в Twitter @Codejockie Отказ