d5-testing-library 1.0.5 → 1.2.0

package/dist/cjs/d5-testing-library.cjs

@@ -39,12 +39,15 @@ __export(src_exports, {
   SubsystemsPanel: () => SubsystemsPanel,
   TextEditor: () => TextEditor,
   byTestId: () => byTestId,
+  byTestIdCssSelector: () => byTestIdCssSelector,
   click: () => click,
   config: () => config,
   createDriver: () => createDriver,
   editorFactory: () => editorFactory,
   elementIsNotPresent: () => elementIsNotPresent,
-  signIn: () => signIn
+  signIn: () => signIn,
+  wait: () => wait,
+  waitElementIsVisible: () => waitElementIsVisible
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -127,8 +130,11 @@ var AbstractPage = class extends AbstractElement {
 
 // src/utils/locators.ts
 var import_selenium_webdriver = require("selenium-webdriver");
+var byTestIdCssSelector = (testId, element = "div") => {
+  return `${element}[data-testid="${testId}"]`;
+};
 var byTestId = (testId, element = "div") => {
-  return import_selenium_webdriver.By.css(`${element}[data-testid=${testId}]`);
+  return import_selenium_webdriver.By.css(byTestIdCssSelector(testId, element));
 };
 
 // src/utils/createDriver.ts
@@ -153,54 +159,91 @@ var elementIsNotPresent = function elementIsNotPresent2(locator) {
 // src/utils/waitElementIsVisible.ts
 var import_selenium_webdriver4 = require("selenium-webdriver");
 
+// src/utils/wait.ts
+async function wait(condition, driver, errorMessage, timeout) {
+  driver = driver ?? config().driver;
+  await driver.wait(condition, timeout ?? config().timeout, errorMessage);
+}
+
+// src/utils/waitElementIsVisible.ts
+async function waitElementIsVisible({
+  element,
+  timeout,
+  errorMessage,
+  driver
+}) {
+  driver = driver ?? config().driver;
+  const condition = import_selenium_webdriver4.until.elementIsVisible(element);
+  await wait(condition.fn, driver, errorMessage ?? condition.description(), timeout ?? config().timeout);
+}
+
 // src/pageObjects/AbstractElementWithParent.ts
+var import_selenium_webdriver5 = require("selenium-webdriver");
 var AbstractElementWithParent = class extends AbstractElement {
-  getParentElement;
-  elementBy;
-  constructor(getParentElement, driver) {
+  elementCssSelector;
+  parentCssSelector;
+  constructor(parentCssSelector, elementCssSelector, driver) {
     super(driver);
-    this.getParentElement = getParentElement;
+    this.parentCssSelector = parentCssSelector;
+    this.elementCssSelector = elementCssSelector;
+  }
+  getFullCssSelector() {
+    if (!this.elementCssSelector) {
+      return this.parentCssSelector;
+    }
+    if (!this.parentCssSelector) {
+      return this.elementCssSelector;
+    }
+    return `${this.parentCssSelector} ${this.elementCssSelector}`;
   }
   async getElement() {
-    const parentEl = await this.getParentElement();
-    return parentEl.findElement(this.elementBy);
+    return this.driver.findElement(import_selenium_webdriver5.By.css(this.getFullCssSelector()));
+  }
+  async getAttribute(attr) {
+    const element = await this.getElement();
+    await waitElementIsVisible({
+      element,
+      driver: this.driver,
+      errorMessage: `Element not found: ${this.getFullCssSelector()}`
+    });
+    return await element.getAttribute(attr);
+  }
+  async getClasses() {
+    return await this.getAttribute("class");
   }
 };
 
 // src/pageObjects/elements/SubsystemsPanel/SubsystemsPanelHeader.ts
+var import_selenium_webdriver6 = require("selenium-webdriver");
 var SubsystemsPanelHeader = class extends AbstractElementWithParent {
-  titleBy = byTestId("subsystems-panel-title", "span");
   async title() {
-    const panel = await this.getParentElement();
-    return panel.findElement(this.titleBy);
+    return this.driver.findElement(import_selenium_webdriver6.By.css(this.getFullCssSelector()));
   }
 };
 
 // src/pageObjects/elements/SubsystemsPanel/SubsystemsPanel.ts
-var import_selenium_webdriver5 = require("selenium-webdriver");
 var SubsystemsPanel = class extends AbstractElement {
-  panelBy = import_selenium_webdriver5.By.id("aside");
   header;
   constructor(driver) {
     super(driver);
-    this.header = new SubsystemsPanelHeader(this.panelElement, this.driver);
+    this.header = new SubsystemsPanelHeader("#aside", byTestIdCssSelector("subsystems-panel-title", "span"), this.driver);
   }
-  panelElement = () => {
-    return this.driver.findElement(this.panelBy);
-  };
   headerTitle() {
     return this.header.title().then((el) => el.getText());
   }
 };
 
 // src/pageObjects/elements/Forms/AbstractForm.ts
-var import_selenium_webdriver6 = require("selenium-webdriver");
+var import_selenium_webdriver7 = require("selenium-webdriver");
 var AbstractForm = class extends AbstractPage {
+  containerCssSelector = "";
   containerBy;
-  popupContainerBy;
+  popupContainerCssSelector;
   constructor(driver) {
     super(driver);
-    this.containerBy = byTestId(`form-content-wrapper-${this.formName}`);
+    const testId = `form-content-wrapper-${this.formName}`;
+    this.containerBy = byTestId(testId);
+    this.containerCssSelector = byTestIdCssSelector(testId);
   }
   async isModal() {
     const el = await this.getContainerElement();
@@ -223,7 +266,7 @@ var AbstractForm = class extends AbstractPage {
    */
   async exists() {
     try {
-      await this.driver.wait(elementIsNotPresent(this.containerBy), 1e3);
+      await wait(elementIsNotPresent(this.containerBy), this.driver);
       return false;
     } catch {
       return true;
@@ -238,35 +281,39 @@ var AbstractForm = class extends AbstractPage {
    */
   async getTitleText() {
     if (await this.isModal()) {
-      const popupEl = await this.driver.findElement(this.popupContainerBy);
-      const titleEl2 = await popupEl.findElement(import_selenium_webdriver6.By.className("popup-title"));
+      const titleEl2 = await this.driver.findElement(import_selenium_webdriver7.By.css(`${this.popupContainerCssSelector} .popup-title`));
       return titleEl2.getText();
     }
-    let container = await this.getContainerElement();
-    let titleEl = await container.findElement(import_selenium_webdriver6.By.className("form-toolbar-name-container"));
+    let titleEl = await this.driver.findElement(import_selenium_webdriver7.By.css(`${this.containerCssSelector} .form-toolbar-name-container`));
     return titleEl.getText();
   }
 };
 
 // src/pageObjects/elements/Forms/FormEdit.ts
-var import_selenium_webdriver9 = require("selenium-webdriver");
+var import_selenium_webdriver14 = require("selenium-webdriver");
 
 // src/pageObjects/elements/Editors/AbstractEditor.ts
-var import_selenium_webdriver7 = require("selenium-webdriver");
+var import_selenium_webdriver8 = require("selenium-webdriver");
 
-// src/pageObjects/AbstractFormElement.ts
-var AbstractFormElement = class extends AbstractElementWithParent {
-  constructor(getParentElement, elementBy, driver) {
-    super(getParentElement, driver);
-    this.elementBy = elementBy;
+// src/pageObjects/elements/Editors/ClearStrategy/InputClearStrategy.ts
+var InputClearStrategy = class {
+  async clear(editor) {
+    const inputEl = await editor.getInputElement();
+    await inputEl.clear();
   }
 };
 
 // src/pageObjects/elements/Editors/AbstractEditor.ts
-var AbstractDXEditorWithInput = class extends AbstractFormElement {
+var AbstractDXEditorWithInput = class extends AbstractElementWithParent {
+  clearStrategy = new InputClearStrategy();
+  setClearStrategy(strategy) {
+    this.clearStrategy = strategy;
+  }
+  getInputCssSelector() {
+    return `${this.getFullCssSelector()} .dx-texteditor-input`;
+  }
   async getInputElement() {
-    const controlEl = await this.getElement();
-    return controlEl.findElement(import_selenium_webdriver7.By.className("dx-texteditor-input"));
+    return this.driver.findElement(import_selenium_webdriver8.By.css(this.getInputCssSelector()));
   }
   async getInputValue() {
     const inputEl = await this.getInputElement();
@@ -275,12 +322,19 @@ var AbstractDXEditorWithInput = class extends AbstractFormElement {
   async setInputValue(value) {
     const inputEl = await this.getInputElement();
     await click(inputEl, this.driver);
-    await inputEl.sendKeys(value, import_selenium_webdriver7.Key.ENTER);
+    await inputEl.sendKeys(value, import_selenium_webdriver8.Key.ENTER);
+  }
+  async clear() {
+    await this.clearStrategy.clear(this);
   }
 };
 
 // src/pageObjects/elements/Editors/TextEditor.ts
 var TextEditor = class extends AbstractDXEditorWithInput {
+  constructor(parentCssSelector, elementCssSelector, driver) {
+    super(parentCssSelector, elementCssSelector, driver);
+    this.setClearStrategy(new InputClearStrategy());
+  }
   getValue() {
     return this.getInputValue();
   }
@@ -291,6 +345,10 @@ var TextEditor = class extends AbstractDXEditorWithInput {
 
 // src/pageObjects/elements/Editors/NumberEditor.ts
 var NumberEditor = class extends AbstractDXEditorWithInput {
+  constructor(parentCssSelector, elementCssSelector, driver) {
+    super(parentCssSelector, elementCssSelector, driver);
+    this.setClearStrategy(new InputClearStrategy());
+  }
   async getValue() {
     const value = await super.getInputValue();
     return value == "" ? null : Number.parseFloat(value);
@@ -300,16 +358,22 @@ var NumberEditor = class extends AbstractDXEditorWithInput {
   }
 };
 
+// src/pageObjects/AbstractFormElement.ts
+var AbstractFormElement = class extends AbstractElementWithParent {
+  constructor(parentCssSelector, elementCssSelector, driver) {
+    super(parentCssSelector, elementCssSelector, driver);
+  }
+};
+
 // src/pageObjects/elements/Editors/CheckBox.ts
-var CheckBox = class extends AbstractFormElement {
+var CheckBox = class extends AbstractElementWithParent {
   async getValue() {
-    const inputEl = await this.getElement();
-    const result = await inputEl.getAttribute("aria-checked");
+    const result = await this.getAttribute("aria-checked");
     if (result === "true")
-      return true;
+      return 1;
     if (result === "false")
-      return false;
-    return void 0;
+      return 0;
+    return null;
   }
   async setValue(value) {
     const inputEl = await this.getElement();
@@ -321,7 +385,7 @@ var CheckBox = class extends AbstractFormElement {
 };
 
 // src/pageObjects/elements/Editors/SelectBoxEditor.ts
-var import_selenium_webdriver8 = require("selenium-webdriver");
+var import_selenium_webdriver10 = require("selenium-webdriver");
 
 // src/utils/xpathHelper.ts
 var XPathHelper = class {
@@ -333,24 +397,50 @@ var XPathHelper = class {
   }
 };
 
+// src/pageObjects/elements/Editors/ClearStrategy/ClearButtonStrategy.ts
+var import_selenium_webdriver9 = require("selenium-webdriver");
+var DX_TEXTEDITOR_EMPTY = "dx-texteditor-empty";
+var DX_CLEAR_BUTTON_AREA = "dx-clear-button-area";
+var ClearButtonStrategy = class {
+  editorContainerClass;
+  _driver;
+  constructor(editorContainerClass, driver) {
+    this.editorContainerClass = editorContainerClass;
+    this._driver = driver;
+  }
+  async isEmptyEditorField() {
+    const editorContainer = await this._driver.findElement(import_selenium_webdriver9.By.css(this.editorContainerClass));
+    const classAttribute = await editorContainer.getAttribute("class");
+    return classAttribute.includes(DX_TEXTEDITOR_EMPTY);
+  }
+  async clear() {
+    if (await this.isEmptyEditorField()) {
+      throw new Error("This field is already empty");
+    }
+    const clearBtnSelector = `${this.editorContainerClass} .${DX_CLEAR_BUTTON_AREA}`;
+    const clearBtn = await this._driver.findElement(import_selenium_webdriver9.By.css(clearBtnSelector));
+    await click(clearBtn, this._driver);
+  }
+};
+
 // src/pageObjects/elements/Editors/SelectBoxEditor.ts
 var SELECT_BOX_OPTION_TEXT_CONTAINER_CLASS = "d5-multi-select-item";
 var SELECT_BOX_ELEMENT_ROLE = "option";
+var combinedValueXpath = (value) => `${XPathHelper.getRoleXpath(SELECT_BOX_ELEMENT_ROLE)}${XPathHelper.getClassAndValueXpath(
+  SELECT_BOX_OPTION_TEXT_CONTAINER_CLASS,
+  value
+)}`;
 var SelectBoxEditor = class extends AbstractDXEditorWithInput {
+  constructor(parentCssSelector, elementCssSelector, driver) {
+    super(parentCssSelector, elementCssSelector, driver);
+    this.setClearStrategy(new ClearButtonStrategy(this.getFullCssSelector(), this.driver));
+  }
   async setSelectInputValue(value) {
     const inputEl = await this.getInputElement();
     await click(inputEl, this.driver);
-    await inputEl.sendKeys(value, import_selenium_webdriver8.Key.ENTER);
-    const combinedValueXpath = XPathHelper.getRoleXpath(SELECT_BOX_ELEMENT_ROLE) + XPathHelper.getClassAndValueXpath(SELECT_BOX_OPTION_TEXT_CONTAINER_CLASS, value);
-    await this.driver.wait(async () => {
-      try {
-        const optElement = await inputEl.findElement(import_selenium_webdriver8.By.xpath(combinedValueXpath));
-        await click(optElement, this.driver);
-        return true;
-      } catch (e) {
-        return false;
-      }
-    }, 2e3);
+    await inputEl.sendKeys(value, import_selenium_webdriver10.Key.ENTER);
+    const optElement = await inputEl.findElement(import_selenium_webdriver10.By.xpath(combinedValueXpath(value)));
+    await click(optElement, this.driver);
   }
   async getValue() {
     const value = await super.getInputValue();
@@ -362,15 +452,14 @@ var SelectBoxEditor = class extends AbstractDXEditorWithInput {
 };
 
 // src/pageObjects/elements/Editors/SwitchEditor.ts
-var SwitchEditor = class extends AbstractFormElement {
+var SwitchEditor = class extends AbstractElementWithParent {
   async getValue() {
-    const inputEl = await this.getElement();
-    const result = await inputEl.getAttribute("aria-label");
+    const result = await this.getAttribute("aria-label");
     if (result === "ON")
       return 1;
     if (result === "OFF")
       return 0;
-    return void 0;
+    return null;
   }
   async setValue(value) {
     if (value !== 0 && value !== 1) {
@@ -378,31 +467,196 @@ var SwitchEditor = class extends AbstractFormElement {
     }
     const inputEl = await this.getElement();
     const currentValue = await this.getValue();
-    if (currentValue !== value) {
-      await click(inputEl, this.driver);
-      await this.driver.wait(async () => {
-        const updatedValue = await this.getValue();
-        return updatedValue !== currentValue;
-      });
+    if (currentValue === value) {
+      return;
+    }
+    await click(inputEl, this.driver);
+    await wait(async () => {
+      const updatedValue = await this.getValue();
+      return updatedValue !== currentValue;
+    }, this.driver);
+  }
+};
+
+// src/pageObjects/elements/Editors/TagBox.ts
+var import_selenium_webdriver11 = require("selenium-webdriver");
+var TAGS_SELECTOR = ".dx-tag .tag-text";
+var DX_TAG_CONTAINER = "dx-tag-container";
+var DX_TEXTEDITOR_EMPTY2 = "dx-texteditor-empty";
+var BTN_OK_SELECTOR = ".dx-tagbox-popup-wrapper .dx-popup-bottom .dx-button.dx-popup-done";
+var TagBox = class extends AbstractDXEditorWithInput {
+  constructor(parentCssSelector, elementCssSelector, driver) {
+    super(parentCssSelector, elementCssSelector, driver);
+    this.setClearStrategy(new ClearButtonStrategy(this.getFullCssSelector(), this.driver));
+  }
+  async setTagBoxInputValue(values) {
+    const lastElement = values[values.length - 1];
+    const inputEl = await this.getInputElement();
+    await inputEl.click();
+    for (const value of values) {
+      await this.selectOption(inputEl, value, lastElement);
+    }
+    await this.confirmSelection();
+  }
+  async selectOption(inputEl, value, lastElement) {
+    await inputEl.sendKeys(value);
+    const optElement = await inputEl.findElement(import_selenium_webdriver11.By.xpath(combinedValueXpath(value)));
+    await click(optElement, this.driver);
+    if (value !== lastElement) {
+      await inputEl.clear();
+    }
+  }
+  async confirmSelection() {
+    const inputEl = await this.getInputElement();
+    const option = await inputEl.findElement(import_selenium_webdriver11.By.xpath(XPathHelper.getRoleXpath(SELECT_BOX_ELEMENT_ROLE)));
+    const btnOk = await this.driver.findElement(import_selenium_webdriver11.By.css(BTN_OK_SELECTOR));
+    await wait(async () => {
+      return await option.getAttribute("aria-selected") === "true";
+    }, this.driver);
+    await click(btnOk, this.driver);
+  }
+  async getTagBoxInputValue() {
+    if (await this.isTagBoxEmpty()) {
+      return [];
+    }
+    const tags = await this.driver.findElements(import_selenium_webdriver11.By.css(`${this.getFullCssSelector()} .${DX_TAG_CONTAINER} ${TAGS_SELECTOR}`));
+    const values = [];
+    for (const tag of tags) {
+      const text = await tag.getText();
+      values.push(text);
+    }
+    return values;
+  }
+  async isTagBoxEmpty() {
+    const classAttribute = await this.getClasses();
+    return classAttribute.includes(DX_TEXTEDITOR_EMPTY2);
+  }
+  async getValue() {
+    const value = await this.getTagBoxInputValue();
+    return value.length ? value : null;
+  }
+  async setValue(values) {
+    if (!Array.isArray(values)) {
+      throw new Error("The provided value is not an array");
+    }
+    await this.setTagBoxInputValue(values);
+  }
+  async remove(itemText) {
+    const tagValues = await this.getValue();
+    const tagExists = tagValues.includes(itemText);
+    if (!tagExists) {
+      throw new Error(`The tag with the text: ${itemText} was not found`);
+    }
+    const clearBtnTestId = byTestIdCssSelector(`clear-button-${itemText}`);
+    const clearBtn = await this.driver.findElement(import_selenium_webdriver11.By.css(`${this.getFullCssSelector()} .${DX_TAG_CONTAINER} ${clearBtnTestId}`));
+    await click(clearBtn, this.driver);
+  }
+};
+
+// src/pageObjects/elements/Editors/ButtonGroup.ts
+var import_selenium_webdriver12 = require("selenium-webdriver");
+var ITEM_CLASS = "dx-buttongroup-item";
+var SELECTED_CLASS = "dx-state-selected";
+var ButtonGroup = class extends AbstractElementWithParent {
+  getItems() {
+    return this.driver.findElements(import_selenium_webdriver12.By.css(`${this.getFullCssSelector()} .${ITEM_CLASS}`));
+  }
+  getDataValue(el) {
+    return el.getAttribute("data-value");
+  }
+  async getValue() {
+    const selectedEl = await this.driver.findElement(import_selenium_webdriver12.By.css(`${this.getFullCssSelector()} .${ITEM_CLASS}.${SELECTED_CLASS}`));
+    return this.getDataValue(selectedEl);
+  }
+  async setValue(value) {
+    const items = await this.getItems();
+    let buttonEl = void 0;
+    for (const item of items) {
+      const text = await this.getDataValue(item);
+      if (text == value) {
+        buttonEl = item;
+        break;
+      }
     }
+    if (!buttonEl)
+      throw new Error(`Cannot find item in button group with text: ${value}`);
+    await click(buttonEl, this.driver);
+  }
+};
+
+// src/pageObjects/elements/Editors/BooleanSelector.ts
+var BooleanSelector = class extends ButtonGroup {
+  // @ts-ignore
+  async getValue() {
+    const value = await super.getValue();
+    return value === "null" ? null : value === "1" ? 1 : 0;
+  }
+  // @ts-ignore
+  async setValue(value) {
+    const val = value == null ? "null" : value ? "1" : "0";
+    await super.setValue(val);
+  }
+};
+
+// src/pageObjects/elements/Editors/DateEditor.ts
+var import_selenium_webdriver13 = require("selenium-webdriver");
+var DateEditor = class extends AbstractDXEditorWithInput {
+  constructor(parentCssSelector, elementCssSelector, driver) {
+    super(parentCssSelector, elementCssSelector, driver);
+    this.setClearStrategy(new InputClearStrategy());
+  }
+  async getDateElement() {
+    return this.driver.findElement(import_selenium_webdriver13.By.css(this.getFullCssSelector() + " .dx-dropdowneditor-input-wrapper input[type=hidden]"));
+  }
+  async setDateValue(value) {
+    const dateEl = await this.getInputElement();
+    const stringDate = value.toJSON().split("T")[0];
+    const dateArr = stringDate.split("-");
+    const [year, month, day] = dateArr;
+    const keys = day + month + year;
+    await click(dateEl, this.driver);
+    const actions = this.driver.actions({ async: true });
+    await actions.move({ origin: dateEl }).sendKeys(import_selenium_webdriver13.Key.HOME).perform();
+    await actions.move({ origin: dateEl }).sendKeys(keys, import_selenium_webdriver13.Key.ENTER).perform();
+  }
+  async getDateValue() {
+    const inputEl = await this.getDateElement();
+    return inputEl.getAttribute("value");
+  }
+  async getValue() {
+    const value = await this.getDateValue();
+    return value == "" ? null : new Date(value);
+  }
+  setValue(value) {
+    if (typeof value === "object") {
+      return this.setDateValue(value);
+    }
+    throw new Error(`Value is incorrect. It should be Object`);
   }
 };
 
 // src/pageObjects/elements/Editors/editorFactory.ts
-var editorFactory = async (getParentElement, elementBy, driver) => {
-  const elementInstance = new AbstractFormElement(getParentElement, elementBy, driver);
-  const element = await elementInstance.getElement();
-  const classSting = await element.getAttribute("class");
+var editorFactory = async (parentCssSelector, elementCssSelector, driver) => {
+  const elementInstance = new AbstractFormElement(parentCssSelector, elementCssSelector, driver);
+  const classSting = await elementInstance.getClasses();
   if (classSting.includes("text-control"))
-    return new TextEditor(getParentElement, elementBy, driver);
+    return new TextEditor(parentCssSelector, elementCssSelector, driver);
   if (classSting.includes("number-control"))
-    return new NumberEditor(getParentElement, elementBy, driver);
+    return new NumberEditor(parentCssSelector, elementCssSelector, driver);
   if (classSting.includes("check-box"))
-    return new CheckBox(getParentElement, elementBy, driver);
+    return new CheckBox(parentCssSelector, elementCssSelector, driver);
+  if (classSting.includes("multi-select-control"))
+    return new TagBox(parentCssSelector, elementCssSelector, driver);
   if (classSting.includes("select-control"))
-    return new SelectBoxEditor(getParentElement, elementBy, driver);
+    return new SelectBoxEditor(parentCssSelector, elementCssSelector, driver);
   if (classSting.includes("switch-control"))
-    return new SwitchEditor(getParentElement, elementBy, driver);
+    return new SwitchEditor(parentCssSelector, elementCssSelector, driver);
+  if (classSting.includes("date-control"))
+    return new DateEditor(parentCssSelector, elementCssSelector, driver);
+  if (classSting.includes("buttons-group"))
+    return new BooleanSelector(parentCssSelector, elementCssSelector, driver);
+  if (classSting.includes("button-group-field"))
+    return new ButtonGroup(parentCssSelector, elementCssSelector, driver);
   throw new Error("Unknown type of editor. Please write ticket to the support");
 };
 
@@ -413,6 +667,9 @@ function createDataTestId(formName, itemType, itemName) {
 function createFieldTestId(formName, itemName) {
   return createDataTestId(formName, "form_field" /* FORM_FIELD */, itemName);
 }
+function createGroupTestId(formName, itemName) {
+  return createDataTestId(formName, "group" /* GROUP */, itemName);
+}
 function createTableId(formName) {
   return `${"table" /* TABLE */}-${formName}`;
 }
@@ -420,13 +677,12 @@ function createTableId(formName) {
 // src/pageObjects/elements/FormField.ts
 var FormField = class extends AbstractElementWithParent {
   editor;
-  constructor(getParentElement, formName, name, driver) {
-    super(getParentElement, driver);
-    this.elementBy = byTestId(createFieldTestId(formName, name));
+  constructor(parentCssSelector, formName, name, driver) {
+    super(parentCssSelector, byTestIdCssSelector(createFieldTestId(formName, name)), driver);
   }
   async initEditor() {
     if (!this.editor) {
-      this.editor = await editorFactory(this.getParentElement, this.elementBy, this.driver);
+      this.editor = await editorFactory(this.parentCssSelector, this.elementCssSelector, this.driver);
     }
   }
   /**
@@ -449,14 +705,85 @@ var FormField = class extends AbstractElementWithParent {
     await this.initEditor();
     return this.editor.setValue(value);
   }
+  /**
+   * Очищает значение в поле
+   * @example
+   * await formEdit.field('NumberFld').clear();
+   */
+  async clear() {
+    await this.initEditor();
+    if (!this.editor.clear) {
+      throw new Error("The clear method is not available for this field type.");
+    }
+    return this.editor.clear();
+  }
+  /**
+   * Удаляет тег по переданному тексту
+   * @example
+   * await formEdit.field('TagBox').remove('test');
+   */
+  async remove(itemText) {
+    await this.initEditor();
+    if (!this.editor.remove) {
+      throw new Error("This method is only available for the TagBox field.");
+    }
+    return this.editor.remove(itemText);
+  }
+};
+
+// src/pageObjects/elements/Groups/AbstractGroup.ts
+var AbstractGroup = class extends AbstractElementWithParent {
+  async isDisplayed() {
+    const groupElement = await this.getElement();
+    return await groupElement.isDisplayed();
+  }
+};
+
+// src/pageObjects/elements/Groups/Panel.ts
+var Panel = class extends AbstractGroup {
+};
+
+// src/pageObjects/elements/Groups/groupFactory.ts
+var groupFactory = async (parentCssSelector, elementCssSelector, driver) => {
+  const elementInstance = new AbstractFormElement(parentCssSelector, elementCssSelector, driver);
+  const classSting = await elementInstance.getClasses();
+  if (classSting.includes("panel-group"))
+    return new Panel(parentCssSelector, elementCssSelector, driver);
+  throw new Error("Unknown type of group. Please write ticket to the support");
+};
+
+// src/pageObjects/elements/FormGroup.ts
+var FormGroup = class extends AbstractElementWithParent {
+  editor;
+  constructor(parentCssSelector, formName, name, driver) {
+    super(parentCssSelector, byTestIdCssSelector(createGroupTestId(formName, name)), driver);
+  }
+  async initEditor() {
+    if (!this.editor) {
+      this.editor = await groupFactory(this.parentCssSelector, this.elementCssSelector, this.driver);
+    }
+  }
+  /**
+   * Возвращает булевое значение доступна ли группа
+   * @example
+   * expect(await tableList.group('MainSuperPanel').isDisplayed();
+   */
+  async isDisplayed() {
+    try {
+      await this.initEditor();
+      return this.editor.isDisplayed();
+    } catch {
+      return false;
+    }
+  }
 };
 
 // src/pageObjects/elements/Forms/FormEdit.ts
 var FormEdit = class extends AbstractForm {
-  saveButtonBy = import_selenium_webdriver9.By.id("button-save");
+  saveButtonBy = import_selenium_webdriver14.By.id("button-save");
   constructor(driver) {
     super(driver);
-    this.popupContainerBy = import_selenium_webdriver9.By.className(`popup form-edit-${this.formName}`);
+    this.popupContainerCssSelector = `.popup .form-edit-${this.formName}`;
   }
   /**
    * Находит поле формы редактирования по имени
@@ -466,7 +793,29 @@ var FormEdit = class extends AbstractForm {
    * expect(await formEdit.field('Name').getValue()).toBe('test value');
    */
   field(name) {
-    return new FormField(this.getContainerElement, this.formName, name, this.driver);
+    return new FormField(this.containerCssSelector, this.formName, name, this.driver);
+  }
+  /**
+   * Проверяет не отключена ли кнопка Сохранить
+   * @example
+   * const formEdit = new MyForm();
+   * //...
+   * await formEdit.isSaveButtonDisabled();
+   */
+  async isSaveButtonDisabled() {
+    const saveButton = await this.driver.findElement(this.saveButtonBy);
+    const result = await saveButton.getAttribute("aria-disabled");
+    return result === "true";
+  }
+  /**
+   * Находит группу формы редактирования по имени
+   * @example
+   * const formEdit = new MyForm();
+   * //...
+   * expect(await formEdit.group('Name');
+   */
+  group(name) {
+    return new FormGroup(this.containerCssSelector, this.formName, name, this.driver);
   }
   /**
    * Нажатие на кнопку Сохранить
@@ -476,145 +825,167 @@ var FormEdit = class extends AbstractForm {
    * await formEdit.saveButtonClick();
    */
   async saveButtonClick() {
-    await click(await this.driver.findElement(this.saveButtonBy), this.driver);
+    const saveButton = await this.driver.findElement(this.saveButtonBy);
+    await wait(async () => !await this.isSaveButtonDisabled(), this.driver, "Button is disabled");
+    await click(saveButton, this.driver);
   }
 };
 
-// src/pageObjects/elements/Forms/ListForm.ts
-var import_selenium_webdriver15 = require("selenium-webdriver");
-
 // src/pageObjects/elements/Table/Table.ts
-var import_selenium_webdriver12 = require("selenium-webdriver");
+var import_selenium_webdriver18 = require("selenium-webdriver");
+
+// src/pageObjects/elements/Table/elements/Row.ts
+var import_selenium_webdriver16 = require("selenium-webdriver");
 
 // src/pageObjects/elements/Table/utils.ts
-var import_selenium_webdriver10 = require("selenium-webdriver");
-var getRowPathByIndex = (index) => {
-  return import_selenium_webdriver10.By.css(`tr[aria-rowindex="${transformInputIndex(index)}"]`);
-};
-var getColumnPathByIndex = (index) => {
-  return import_selenium_webdriver10.By.css(`td[aria-colindex="${transformInputIndex(index)}"]`);
-};
-var getColumnPathByCaption = (caption) => {
-  return import_selenium_webdriver10.By.css(`td[role="columnheader"][aria-label="Column ${caption}"]`);
-};
-var getCellPathByIndex = (index) => {
-  return import_selenium_webdriver10.By.css(`td[role="gridcell"][aria-colindex="${transformInputIndex(index)}"]`);
-};
+var import_selenium_webdriver15 = require("selenium-webdriver");
+function getCssRowByIndexSelector(index) {
+  return `tr[aria-rowindex="${transformInputIndex(index)}"]`;
+}
+var getColumnByIndexCssSelector = (columnIndex) => `td[aria-colindex="${transformInputIndex(columnIndex)}"]`;
+var getColumnByCaptionCssSelector = (caption) => `td[role="columnheader"][aria-label="Column ${caption}"]`;
+function getCssCellByIndexSelector(index) {
+  return `td[role="gridcell"][aria-colindex="${transformInputIndex(index)}"]`;
+}
 var transformInputIndex = (index) => index + 1;
 var transformOutputIndex = (index) => +index - 1;
 
-// src/pageObjects/elements/Table/elements/Row.ts
-var import_selenium_webdriver11 = require("selenium-webdriver");
-
 // src/pageObjects/elements/Table/elements/Cell.ts
 var Cell = class extends AbstractElementWithParent {
-  index;
-  constructor(rowEl, index, driver) {
-    super(() => Promise.resolve(rowEl), driver);
-    this.index = index;
-    this.elementBy = getCellPathByIndex(index);
+  _index;
+  getCellIndex;
+  constructor(parentCssSelector, getCellIndex, index, driver) {
+    super(parentCssSelector, getCssCellByIndexSelector(index), driver);
+    this.getCellIndex = getCellIndex;
+    this._index = index;
+  }
+  set index(index) {
+    this._index = index;
+    this.elementCssSelector = getCssCellByIndexSelector(index);
+  }
+  async getElement() {
+    if (this._index == null) {
+      this.index = await this.getCellIndex();
+    }
+    return super.getElement();
   }
   async getValue() {
     const cellEl = await this.getElement();
     return cellEl.getText();
   }
   getIndex() {
-    return this.index;
+    return this._index;
   }
 };
 
 // src/pageObjects/elements/Table/elements/Row.ts
 var DX_SELECTION_CLASS = "dx-selection";
 var DX_ROW_EDIT_CLASS = "dx-edit-row";
+var DX_DATA_ROW_CLASS = "dx-data-row";
 var Row = class extends AbstractElementWithParent {
   index;
   getColumnByCaption;
-  constructor(getParentElement, index, driver, getColumnByCaption) {
-    super(getParentElement, driver);
+  constructor(parentCssSelector, index, driver, getColumnByCaption) {
+    super(parentCssSelector, getCssRowByIndexSelector(index), driver);
     this.index = index;
-    this.elementBy = getRowPathByIndex(index);
     this.getColumnByCaption = getColumnByCaption;
   }
-  async getCellByIndex(index) {
-    const rowEl = await this.getElement();
-    const cell = rowEl.findElement(getCellPathByIndex(index));
-    if (cell) {
-      return new Cell(rowEl, index, this.driver);
-    }
-    throw new Error(`Cannot find cell by index: ${index}`);
+  _getCell(index, caption) {
+    return new Cell(this.getFullCssSelector(), () => {
+      return this.getColumnByCaption(caption).getIndex();
+    }, index, this.driver);
   }
-  async getCell(caption) {
-    const column = await this.getColumnByCaption(caption);
-    if (column) {
-      const index = column.getIndex();
-      return this.getCellByIndex(index);
-    }
-    throw new Error("Unknown caption of cell");
+  getCellByIndex(index) {
+    return this._getCell(index);
+  }
+  getCell(caption) {
+    return this._getCell(void 0, caption);
   }
   async select() {
     const rowEl = await this.getElement();
     await click(rowEl, this.driver);
-    await this.driver.wait(async () => {
-      const classes = await rowEl.getAttribute("class");
-      if (!classes.includes(DX_SELECTION_CLASS))
-        throw new Error("Cannot select row");
-      return true;
-    }, 500);
+    await wait(async () => {
+      const classes = await this.getClasses();
+      return classes.includes(DX_SELECTION_CLASS);
+    }, this.driver, "Cannot select row");
   }
   async isSelected() {
-    const rowEl = await this.getElement();
-    const result = await rowEl.getAttribute("aria-selected");
+    const result = await this.getAttribute("aria-selected");
     return result === "true";
   }
   getIndex() {
     return this.index;
   }
   async getCells() {
-    const rowEl = await this.getElement();
-    const cells = await rowEl.findElements(import_selenium_webdriver11.By.css(`td[role="gridcell"]`));
+    const cells = await this.driver.findElements(import_selenium_webdriver16.By.css(`${this.getFullCssSelector()} td[role="gridcell"]`));
     const result = [];
     cells.forEach((_, index) => {
-      const newCell = new Cell(rowEl, index, this.driver);
+      const newCell = this.getCellByIndex(index);
       result.push(newCell);
     });
     return result;
   }
-  async clickInlineButton(rowClass, buttonClass) {
-    const fixedTable = (await this.getParentElement()).findElement(
-      import_selenium_webdriver11.By.css(".dx-fixed-columns .dx-datagrid-content.dx-datagrid-content-fixed")
-    );
-    const rowEl = await fixedTable.findElement(import_selenium_webdriver11.By.className(rowClass));
-    const button = await rowEl.findElement(import_selenium_webdriver11.By.className(buttonClass));
-    if (button) {
-      return click(button, this.driver);
-    }
-    throw new Error(`Cannot find ${buttonClass} button`);
+  async clickInlineButton(buttonClass) {
+    const FIXED_TABLE_CSS_SELECTOR = ".dx-fixed-columns .dx-datagrid-content.dx-datagrid-content-fixed";
+    const buttonCssSelector = `.${DX_DATA_ROW_CLASS}[aria-rowindex="${transformInputIndex(this.index)}"] .${buttonClass}`;
+    const button = await this.driver.findElement(import_selenium_webdriver16.By.css(`${this.parentCssSelector} ${FIXED_TABLE_CSS_SELECTOR} ${buttonCssSelector}`));
+    return click(button, this.driver);
+  }
+  async checkEditingMode(isEditing, msg) {
+    await wait(async () => {
+      return (await this.getClasses()).includes(DX_ROW_EDIT_CLASS) === isEditing;
+    }, this.driver, msg);
   }
   async edit() {
-    await this.select();
-    return this.clickInlineButton(DX_SELECTION_CLASS, "edit");
+    await this.clickInlineButton("edit");
+    await this.checkEditingMode(true, "Row did not switch to edit mode");
   }
   async save() {
-    return this.clickInlineButton(DX_ROW_EDIT_CLASS, "save");
+    await this.clickInlineButton("save");
+    await this.checkEditingMode(false, "Row did not saved");
   }
   async cancel() {
-    return this.clickInlineButton(DX_ROW_EDIT_CLASS, "cancel");
+    await this.clickInlineButton("cancel");
+    await this.checkEditingMode(false, "Row did not switch to normal mode");
   }
 };
 
 // src/pageObjects/elements/Table/elements/Column.ts
+var import_selenium_webdriver17 = require("selenium-webdriver");
+var getHeaderCssSelector = () => {
+  return ".dx-datagrid-headers .dx-datagrid-content:not(.dx-datagrid-content-fixed)";
+};
 var Column = class extends AbstractElementWithParent {
-  index;
-  constructor(getParentElement, index, driver) {
-    super(getParentElement, driver);
+  _index;
+  _caption;
+  constructor(parentCssSelector, caption, index, driver) {
+    super(parentCssSelector, "", driver);
     this.index = index;
-    this.elementBy = getColumnPathByIndex(index);
+    this._caption = caption;
+  }
+  set index(index) {
+    this._index = index;
+    this.elementCssSelector = getColumnByIndexCssSelector(index);
+  }
+  get index() {
+    return this._index;
+  }
+  async getElement() {
+    await this.getIndex();
+    return super.getElement();
+  }
+  async getIndexByCaption() {
+    const column = await this.driver.findElement(import_selenium_webdriver17.By.css(`${this.parentCssSelector} ${getHeaderCssSelector()} ${getColumnByCaptionCssSelector(this._caption)}`));
+    return transformOutputIndex(await column.getAttribute("aria-colindex"));
   }
   async caption() {
     const el = await this.getElement();
     return el.getText();
   }
-  getIndex() {
+  async getIndex() {
+    if (this.index == null) {
+      this.index = await this.getIndexByCaption();
+    }
     return this.index;
   }
 };
@@ -622,71 +993,36 @@ var Column = class extends AbstractElementWithParent {
 // src/pageObjects/elements/Table/Table.ts
 var Table = class extends AbstractElementWithParent {
   formName;
-  constructor(getParentElement, formName, driver) {
-    super(getParentElement, driver);
-    this.elementBy = import_selenium_webdriver12.By.id(createTableId(formName));
+  constructor(parentCssSelector, formName, driver) {
+    super(parentCssSelector, `#${createTableId(formName)}`, driver);
     this.formName = formName;
   }
-  async getHeaderElement() {
-    const parentEl = await this.getElement();
-    return parentEl.findElement(import_selenium_webdriver12.By.className("dx-header-row"));
+  getRowByIndex(index) {
+    return new Row(this.getFullCssSelector(), index, this.driver, this.getColumnByCaption.bind(this));
   }
-  async getDataGrid() {
-    const parentEl = await this.getElement();
-    return parentEl.findElement(import_selenium_webdriver12.By.css(`div[role="grid"]`));
+  getColumnByIndex(index) {
+    return new Column(this.getFullCssSelector(), void 0, index, this.driver);
   }
-  getTableElement = () => {
-    return this.driver.findElement(this.elementBy);
+  getColumnByCaption = (caption) => {
+    return new Column(this.getFullCssSelector(), caption, void 0, this.driver);
   };
-  async getRowByIndex(index) {
-    const gridContainer = await this.getDataGrid();
-    const row = await gridContainer.findElement(getRowPathByIndex(index));
-    if (row) {
-      return new Row(this.getTableElement, index, this.driver, this.getColumnByCaption.bind(this));
-    }
-    throw new Error(`Cannot find row by index: ${index}`);
-  }
-  async getColumnByIndex(index) {
-    const headerContainer = await this.getHeaderElement();
-    const column = await headerContainer.findElement(getColumnPathByIndex(index));
-    if (column) {
-      return new Column(this.getTableElement, index, this.driver);
-    }
-    throw new Error(`Cannot find column by index: ${index}`);
-  }
-  async getColumnByCaption(caption) {
-    const headerContainer = await this.getHeaderElement();
-    const column = await headerContainer.findElement(getColumnPathByCaption(caption));
-    if (column) {
-      const index = await column.getAttribute("aria-colindex");
-      return new Column(this.getTableElement, transformOutputIndex(index), this.driver);
-    }
-    throw new Error(`Cannot find column by caption: ${caption}`);
-  }
-  async selectRowByIndex(index) {
-    const row = await this.getRowByIndex(index);
-    if (row) {
-      await row.select();
-    } else {
-      throw new Error(`Cannot find row by index: ${index}`);
-    }
+  selectRowByIndex(index) {
+    return this.getRowByIndex(index).select();
   }
   async getRows() {
-    const gridContainer = await this.getDataGrid();
-    const rows = await gridContainer.findElements(import_selenium_webdriver12.By.className("dx-row dx-data-row"));
+    const rows = await this.driver.findElements(import_selenium_webdriver18.By.css(`${this.getFullCssSelector()} .dx-row.dx-data-row`));
     const result = [];
     rows.forEach((_, index) => {
-      const newRow = new Row(this.getTableElement, index, this.driver, this.getColumnByCaption.bind(this));
+      const newRow = new Row(this.getFullCssSelector(), index, this.driver, this.getColumnByCaption);
       result.push(newRow);
     });
     return result;
   }
   async getColumns() {
-    const headerContainer = await this.getHeaderElement();
-    const columns = await headerContainer.findElements(import_selenium_webdriver12.By.css(`td[role="columnheader"]`));
+    const columns = await this.driver.findElements(import_selenium_webdriver18.By.css(`${this.getFullCssSelector()} ${getHeaderCssSelector()} td[role="columnheader"]`));
     const result = [];
     columns.forEach((_, index) => {
-      const newCol = new Column(this.getTableElement, index, this.driver);
+      const newCol = new Column(this.getFullCssSelector(), void 0, index, this.driver);
       result.push(newCol);
     });
     return result;
@@ -702,49 +1038,39 @@ var Table = class extends AbstractElementWithParent {
    * expect(await form.field('Name').getValue()).toBe('test value');
    */
   field(name) {
-    return new FormField(this.getElement, this.formName, name, this.driver);
+    return new FormField(this.getFullCssSelector(), this.formName, name, this.driver);
   }
 };
 
-// src/pageObjects/elements/TableToolbar/TableToolbar.ts
-var import_selenium_webdriver14 = require("selenium-webdriver");
-
 // src/pageObjects/elements/TableToolbar/TableToolbarButton.ts
-var import_selenium_webdriver13 = require("selenium-webdriver");
 var TOOLBAR_BUTTON_CLASS = "toolbar-button";
 var TableToolbarButton = class extends AbstractElementWithParent {
-  constructor(getParentElement, name, driver) {
-    super(getParentElement, driver);
-    this.elementBy = import_selenium_webdriver13.By.id(`${TOOLBAR_BUTTON_CLASS}-${name}`);
+  name;
+  constructor(parentCssSelector, name, driver) {
+    super(parentCssSelector, `#${TOOLBAR_BUTTON_CLASS}-${name}`, driver);
+    this.name = name;
   }
   async click() {
     const button = await this.getElement();
-    return click(button, this.driver);
+    await wait(async () => {
+      return await button.isDisplayed() && !await this.isDisabled();
+    }, this.driver, `Button ${this.name} cannot be clicked. It is not displayed or it is disabled`);
+    await click(button, this.driver);
   }
   async isDisabled() {
     const button = await this.getElement();
-    const result = await button.getAttribute("aria-disabled");
-    return result === "true";
+    return await button.getCssValue("pointer-events") === "none";
   }
 };
 
 // src/pageObjects/elements/TableToolbar/TableToolbar.ts
 var TABLE_TOOLBAR_CLASS = "d5-table-toolbar";
 var TableToolbar = class extends AbstractElementWithParent {
-  constructor(getParentElement, formName, driver) {
-    super(getParentElement, driver);
-    this.elementBy = import_selenium_webdriver14.By.id(`${TABLE_TOOLBAR_CLASS}-${formName}`);
+  constructor(parentCssSelector, formName, driver) {
+    super(parentCssSelector, `#${TABLE_TOOLBAR_CLASS}-${formName}`, driver);
   }
-  getTableToolbarElement = () => {
-    return this.driver.findElement(this.elementBy);
-  };
-  async button(name) {
-    const toolbar = await this.getTableToolbarElement();
-    const button = await toolbar.findElement(import_selenium_webdriver14.By.id(`${TOOLBAR_BUTTON_CLASS}-${name}`));
-    if (button) {
-      return new TableToolbarButton(this.getTableToolbarElement, name, this.driver);
-    }
-    throw new Error(`Cannot find button by name: ${name}`);
+  button(name) {
+    return new TableToolbarButton(this.getFullCssSelector(), name, this.driver);
   }
 };
 
@@ -752,7 +1078,7 @@ var TableToolbar = class extends AbstractElementWithParent {
 var ListForm = class extends AbstractForm {
   constructor(driver) {
     super(driver);
-    this.popupContainerBy = import_selenium_webdriver15.By.className(`popup form-inline-${this.formName}`);
+    this.popupContainerCssSelector = `.popup .form-inline-${this.formName}`;
   }
   /**
    * Находит таблицу
@@ -762,7 +1088,17 @@ var ListForm = class extends AbstractForm {
    * expect(listForm.table());
    */
   table() {
-    return new Table(this.getContainerElement, this.formName, this.driver);
+    return new Table(this.containerCssSelector, this.formName, this.driver);
+  }
+  /**
+   * Находит группу на лист форме по имени
+   * @example
+   * const formEdit = new MyForm();
+   * //...
+   * expect(await formEdit.group('Name');
+   */
+  group(name) {
+    return new FormGroup(this.containerCssSelector, this.formName, name, this.driver);
   }
   /**
    * Находит таблицу
@@ -772,7 +1108,7 @@ var ListForm = class extends AbstractForm {
    * expect(listForm.toolbarButton());
    */
   toolbarButton(name) {
-    const toolbar = new TableToolbar(this.getContainerElement, this.formName, this.driver);
+    const toolbar = new TableToolbar(this.containerCssSelector, this.formName, this.driver);
     return toolbar.button(name);
   }
 };
@@ -800,6 +1136,14 @@ var LoginPage = class extends AbstractPage {
   usernameField = byTestId("loginField", "input");
   passwordField = byTestId("passwordField", "input");
   loginButton = byTestId("loginButton");
+  async locate() {
+    await super.locate();
+    const login = await this.driver.findElement(this.usernameField);
+    await waitElementIsVisible({
+      element: login,
+      driver: this.driver
+    });
+  }
   get path() {
     return LOGIN_PATH;
   }
@@ -832,10 +1176,13 @@ var LoginPage = class extends AbstractPage {
   SubsystemsPanel,
   TextEditor,
   byTestId,
+  byTestIdCssSelector,
   click,
   config,
   createDriver,
   editorFactory,
   elementIsNotPresent,
-  signIn
+  signIn,
+  wait,
+  waitElementIsVisible
 });