chore: Updating codeceptjs dep to 3.7.3

web/libs/editor/tests/e2e/fragments/AtDetails.js

@@ -5,113 +5,131 @@ const { I } = inject();
  * like region labels, editable fields, meta info, etc.
  */
 module.exports = {
-  _rootSelector: ".lsf-details",
-  _labelSelector: ".lsf-detailed-region .lsf-labels-list span",
-  _textSelector: ".lsf-region-meta__content_type_text",
-  _editMetaSelector: '[aria-label="Edit region\'s meta"]',
-  _editableFieldInput: ".lsf-region-editor__input",
-  _editableFieldTitle: ".lsf-region-editor__text",
-  _metaField: ".lsf-detailed-region__meta-text",
-  _resultBlockSelector: ".lsf-detailed-region__result",
-  _resultTitleSelector: ".ant-typography,[class*='typography-']",
-  _resultValueSelector: ".lsf-region-meta__value",
-  _sectionHeadSelector: ".lsf-details__section-head",
-  locateDetailPanel() {
-    return locate(this._rootSelector);
-  },
-  locate(locator) {
-    return locator ? locate(locator).inside(this.locateDetailPanel()) : this.locateDetailPanel();
-  },
-  locateMeta() {
-    return this.locate(this._metaField);
-  },
-  locateEditableField(field) {
-    const title = this.locate(this._editableFieldTitle).withText(field);
+	_rootSelector: ".lsf-details",
+	_labelSelector: ".lsf-detailed-region .lsf-labels-list span",
+	_textSelector: ".lsf-region-meta__content_type_text",
+	_editMetaSelector: '//*[@aria-label="Edit region\'s meta"]',
+	_editableFieldInput: ".lsf-region-editor__input",
+	_editableFieldTitle: ".lsf-region-editor__text",
+	_metaField: ".lsf-detailed-region__meta-text",
+	_resultBlockSelector: ".lsf-detailed-region__result",
+	_resultTitleSelector: ".ant-typography",
+	_resultValueSelector: ".lsf-region-meta__value",
+	_sectionHeadSelector: ".lsf-details__section-head",
+	locateDetailPanel() {
+		return locate(this._rootSelector);
+	},
+	locate(locator) {
+		return locator
+			? locate(locator).inside(this.locateDetailPanel())
+			: this.locateDetailPanel();
+	},
+	locateMeta() {
+		return this.locate(this._metaField);
+	},
+	locateEditableField(field) {
+		const title = this.locate(this._editableFieldTitle).withText(field);
 
-    return this.locate(this._editableFieldInput).before(title);
-  },
-  locateResultBlock() {
-    return this.locate(this._resultBlockSelector);
-  },
-  locateResultRating(rating) {
-    const locator = this.locateResultBlock().withDescendant(locate(this._resultTitleSelector).withText("Rating"));
+		return this.locate(this._editableFieldInput).before(title);
+	},
+	locateResultBlock() {
+		return this.locate(this._resultBlockSelector);
+	},
+	locateResultRating(rating) {
+		const titleLocator = locate(this._resultTitleSelector).withText("Rating")
+			.or(locate('[class*="typography-"]').withText("Rating"));
+		const locator = this.locateResultBlock().withDescendant(titleLocator);
 
-    if (typeof rating === "undefined") return locator;
+		if (typeof rating === "undefined") return locator;
 
-    return locator.withDescendant(locate(this._resultValueSelector).withText(`${rating}`));
-  },
-  locateResultTextarea(text) {
-    const locator = this.locateResultBlock().withDescendant(locate(this._resultTitleSelector).withText("Text"));
+		return locator.withDescendant(
+			locate(this._resultValueSelector).withText(`${rating}`),
+		);
+	},
+	locateResultTextarea(text) {
+		const titleLocator = locate(this._resultTitleSelector).withText("Text")
+			.or(locate('[class*="typography-"]').withText("Text"));
+		const locator = this.locateResultBlock().withDescendant(titleLocator);
 
-    if (typeof text === "undefined") return locator;
+		if (typeof text === "undefined") return locator;
 
-    if (!Array.isArray(text)) text = [text];
-    for (const line of text) {
-      locator.withDescendant(locate(this._resultValueSelector).withText(line));
-    }
-    return locator;
-  },
-  locateResultChoices(value) {
-    const locator = this.locateResultBlock().withDescendant(locate(this._resultTitleSelector).withText("Choices"));
+		if (!Array.isArray(text)) text = [text];
+		for (const line of text) {
+			locator.withDescendant(locate(this._resultValueSelector).withText(line));
+		}
+		return locator;
+	},
+	locateResultChoices(value) {
+		const titleLocator = locate(this._resultTitleSelector).withText("Choices")
+			.or(locate('[class*="typography-"]').withText("Choices"));
+		const locator = this.locateResultBlock().withDescendant(titleLocator);
 
-    if (typeof value === "undefined") return locator;
+		if (typeof value === "undefined") return locator;
 
-    if (!Array.isArray(value)) value = [value];
+		if (!Array.isArray(value)) value = [value];
 
-    return locator.withDescendant(locate(this._resultValueSelector).withText(value.join(", ")));
-  },
-  locateLabel(text) {
-    return text ? locate(this._labelSelector).withText(`${text}`) : locate(this._labelSelector);
-  },
-  locateText(text) {
-    return text ? locate(this._textSelector).withText(`${text}`) : locate(this._textSelector);
-  },
-  clickEditMeta() {
-    I.click(this.locate(this._editMetaSelector));
-  },
-  fillMeta(text) {
-    I.fillField(this.locateMeta(), text);
-  },
-  // can be not very precise: actual '82.1000003' will match value '82.1'
-  seeFieldWithValue(field, value) {
-    I.seeInField(this.locateEditableField(field), value);
-  },
-  seeMeta(text) {
-    I.see(text, this.locateMeta());
-  },
-  dontSeeMeta(text) {
-    I.dontSee(text, this.locateMeta());
-  },
-  clickMeta() {
-    I.click(this.locateMeta());
-  },
-  seeLabel(text) {
-    I.seeElement(this.locateLabel(text));
-  },
-  seeLabels(count) {
-    count && I.seeElement(this.locateLabel().at(count));
-    I.dontSeeElement(this.locateLabel().at(count + 1));
-  },
-  seeText(text) {
-    I.seeElement(this.locateText(text));
-  },
-  seeResultRating(rating) {
-    I.seeElement(this.locateResultRating(rating));
-  },
-  seeResultTextarea(text) {
-    I.seeElement(this.locateResultTextarea(text));
-  },
-  seeResultChoices(value) {
-    I.seeElement(this.locateResultChoices(value));
-  },
-  clickCreateRelation() {
-    I.click(this.locate('[aria-label="Create Relation"]'));
-  },
-  clickDeleteRegion() {
-    I.click(this.locate('[aria-label="Delete selected region"]'));
-  },
+		return locator.withDescendant(
+			locate(this._resultValueSelector).withText(value.join(", ")),
+		);
+	},
+	locateLabel(text) {
+		return text
+			? locate(this._labelSelector).withText(`${text}`)
+			: locate(this._labelSelector);
+	},
+	locateText(text) {
+		return text
+			? locate(this._textSelector).withText(`${text}`)
+			: locate(this._textSelector);
+	},
+	clickEditMeta() {
+		I.click(this.locate(this._editMetaSelector));
+	},
+	fillMeta(text) {
+		I.fillField(this.locateMeta(), text);
+	},
+	// can be not very precise: actual '82.1000003' will match value '82.1'
+	seeFieldWithValue(field, value) {
+		I.seeInField(this.locateEditableField(field), value);
+	},
+	seeMeta(text) {
+		I.see(text, this.locateMeta());
+	},
+	dontSeeMeta(text) {
+		I.dontSee(text, this.locateMeta());
+	},
+	clickMeta() {
+		I.click(this.locateMeta());
+	},
+	seeLabel(text) {
+		I.seeElement(this.locateLabel(text));
+	},
+	seeLabels(count) {
+		count && I.seeElement(this.locateLabel().at(count));
+		I.dontSeeElement(this.locateLabel().at(count + 1));
+	},
+	seeText(text) {
+		I.seeElement(this.locateText(text));
+	},
+	seeResultRating(rating) {
+		I.seeElement(this.locateResultRating(rating));
+	},
+	seeResultTextarea(text) {
+		I.seeElement(this.locateResultTextarea(text));
+	},
+	seeResultChoices(value) {
+		I.seeElement(this.locateResultChoices(value));
+	},
+	clickCreateRelation() {
+		I.click(this.locate('[aria-label="Create Relation"]'));
+	},
+	clickDeleteRegion() {
+		I.click(this.locate('[aria-label="Delete selected region"]'));
+	},
 
-  seeRelations(count) {
-    I.seeElement(this.locate(this._sectionHeadSelector).withText(`Relations (${count})`));
-  },
+	seeRelations(count) {
+		I.seeElement(
+			this.locate(this._sectionHeadSelector).withText(`Relations (${count})`),
+		);
+	},
 };

web/libs/editor/tests/e2e/fragments/AtTopbar.js

@@ -13,14 +13,14 @@ module.exports = {
     this.closeAnnotations();
   },
   openAnnotaions() {
-    I.dontSee(this._annotationsList);
+    I.dontSeeElement(this._annotationsList);
     I.click(this._topbarAnnotationsToggle);
     I.seeElement(this._annotationsList);
   },
   closeAnnotations() {
     I.seeElement(this._annotationsList);
     I.click(this._topbarAnnotationsToggle);
-    I.dontSee(this._annotationsList);
+    I.dontSeeElement(this._annotationsList);
   },
   selectAnnotationAt(index = 0) {
     I.click(this._annotationsList.find(this._annotationsListItemSelector).at(index));

web/libs/editor/tests/e2e/helpers/PlaywrightAddon.js

@@ -45,7 +45,8 @@ class PlaywrightAddon extends Helper {
    * @returns {Promise<string[]>} CSS value
    */
   async grabCssPropertyFromAllPseudo(locator, cssProperty, pseudoElement) {
-    const els = await this.helpers.Playwright._locate(locator);
+    const matcher = await this.helpers.Playwright._locate(locator);
+    const els = await matcher.all();
 
     this.helpers.Playwright.debug(`Matched ${els.length} elements`);
     return await Promise.all(
@@ -67,7 +68,9 @@ class PlaywrightAddon extends Helper {
 
     while (Date.now() - startTime < timeout) {
       try {
-        const els = await this.helpers.Playwright._locate(selector);
+        // Use the page.locator method directly for better compatibility
+        const matcher = this.helpers.Playwright.page.locator(selector);
+        const els = await matcher.all();
         const areFocused = await Promise.all(els.map((el) => el.evaluate((el) => el === document.activeElement)));
         if (areFocused.some((el) => el)) {
           isFocused = true;

web/libs/editor/tests/e2e/package.json

@@ -5,6 +5,7 @@
   "main": "codecept.conf.js",
   "private": true,
   "scripts": {
+    "postinstall": "playwright install chromium",
     "test": "codeceptjs run",
     "test:ui": "codecept-ui run",
     "test:local": "HEADLESS=true yarn test",
@@ -31,15 +32,14 @@
     "@types/rimraf": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
-    "codeceptjs": "3.3.3",
+    "codeceptjs": "3.7.3",
     "eslint": "^8.4.1",
     "eslint-plugin-codeceptjs": "^1.3.0",
     "mkdirp": "^1.0.4",
     "nyc": "^15.1.0",
-    "playwright": "^1.16.3",
+    "playwright": "^1.51.0",
     "puppeteer": "^24.6.1",
     "rimraf": "^3.0.2",
-
     "ts-node": "^10.0.0",
     "typescript": "^4.5.3",
     "v8-to-istanbul": "^9.0.0",

web/libs/editor/tests/e2e/tests/unfinished-polygons.test.js

@@ -51,7 +51,7 @@ Scenario("Drafts for unfinished polygons", async ({ I, LabelStudio, AtLabels, At
   ]);
 
   I.say("wait until autosave");
-  I.waitForFunction(() => !!window.LSDraft, 0.5);
+  I.waitForFunction(() => !!window.LSDraft, 2);
   I.say("check result");
   const draft = await I.executeScript(getLocallySavedDraft);
 
@@ -374,7 +374,7 @@ Scenario("Change label on unfinished polygons", async ({ I, LabelStudio, AtLabel
   AtLabels.clickLabel("World");
 
   I.say("wait until autosave");
-  I.waitForFunction(() => !!window.LSDraft, 0.5);
+  I.waitForFunction(() => !!window.LSDraft, 2);
   I.say("check result");
   const draft = await I.executeScript(getLocallySavedDraft);