Создание статических селекторов контента для Cypress

Question

Мы переходим от GEB / Spock к Cypress для автоматизации внешнего интерфейса.С GEB / Spock объекты страницы имели статическое содержимое.Это использовалось для создания селекторов для объектов страницы.

class LoginPage extends Page {
//private static Logger log = LoggerFactory.getLogger(LoginPage.class);


static url = 'login/'
static at = { title == "Login to TalentBank"}
static content = {
    backgroundImage { $("div [style*=\"background-image\"]") }
    logo { $(".center-img img") }
    emailHeader { $("#emailGroup:not([style*=\"none\"]) label") }
    emailTextBox { $('#emailGroup:not([style*="none"]) #email') }
    nextButton { $('#loginWithEmail') }
    pwdHeader { $("#passwordGroup:not([style*=\"none\"]) label") }
    pwdTextBox { $("#passwordGroup:not([style*=\"none\"]) #password") }
    loginButton { $("#loginWithPassword") }
    loginError(wait: true) { $("#loginError") }

В кипарисе я не уверен, где создавать и вызывать эти объекты.Предполагается, что селекторы будут создаваться в виде осветителей или файлов поддержки?Я прочитал документацию по кипарису, но не могу найти то, что ищу.

Редактировать: 2/4

При поддержке я попытался создать файл LoginPage.js, содержащий объекты

// Login Page Objects
const emailTextBox = $('#emailGroup:not([style*="none"]) #email');

Мой тест находится в каталоге интеграции.Я использую новую константу в моем тесте.В моей среде IDE нет ошибок, поскольку тест, по-видимому, находит константу в том виде, в каком она отображается в полях кода Ctrl + Пробел.

describe('Successfull log in to the System', function() {

    it('Standard User - Successful log in ', function() {
       cy.get(emailTextBox).type('RodneyRuxin@mailinator.com')

Однако, когда я запускаю свой тест, я получаю сообщение об ошибке

ReferenceError: emailTextBox не определен

.

Answer 1

Хорошо, так что это разные селекторы для взаимодействия:

Я бы порекомендовал совершенно другой класс, а затем сделал бы их импорт?Так, например, файл с именем locators.js

, который содержит:

export const backgroundImage = () => cy.get("div [style*=\"background-image\"]");

, затем в другом файле вы можете импортировать его следующим образом:

import * as locators from "../locators/locators.js";

иНазовите это так (пример):

locators.backgroundImage()
    .should('be.visible')
    .click();

Надеюсь, это поможет!