From 24d4aa771c658f45033dff9767b6b4bf2f3064e7 Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Thu, 6 Jul 2023 17:38:15 +0200
Subject: [PATCH 01/15] feat: move to Locator playwright

---
 lib/helper/Playwright.js       | 137 ++++++++++++++-------------------
 test/helper/Playwright_test.js |  24 +++---
 test/helper/webapi.js          |  53 +++++--------
 3 files changed, 91 insertions(+), 123 deletions(-)

diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 2e3143880..5542ddfb6 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -1123,7 +1123,7 @@ class Playwright extends Helper {
   }
 
   /**
-   * Find a checkbox by providing human readable text:
+   * Find a checkbox by providing human-readable text:
    * NOTE: Assumes the checkable element exists
    *
    * ```js
@@ -1526,13 +1526,8 @@ class Playwright extends Helper {
     const els = await findFields.call(this, field);
     assertElementExists(els, field, 'Field');
     const el = els[0];
-    const tag = await el.getProperty('tagName').then(el => el.jsonValue());
-    const editable = await el.getProperty('contenteditable').then(el => el.jsonValue());
-    if (tag === 'INPUT' || tag === 'TEXTAREA') {
-      await this._evaluateHandeInContext(el => el.value = '', el);
-    } else if (editable) {
-      await this._evaluateHandeInContext(el => el.innerHTML = '', el);
-    }
+
+    await el.fill('');
 
     highlightActiveElement.call(this, el, this.page);
 
@@ -1556,21 +1551,16 @@ class Playwright extends Helper {
    * ```
    */
   async clearField(locator, options = {}) {
-    let result;
-    const isNewClearMethodPresent = typeof this.page.locator().clear === 'function';
+    const els = await findFields.call(this, locator);
+    assertElementExists(els, locator, 'Field to clear');
+
+    const el = els[0];
 
-    if (isNewClearMethodPresent) {
-      const els = await findFields.call(this, locator);
-      assertElementExists(els, locator, 'Field to clear');
-      // TODO: locator change required after #3677 implementation
-      const elXpath = await getXPathForElement(els[0]);
+    highlightActiveElement.call(this, el, this.page);
 
-      await this.page.locator(elXpath).clear(options);
-      result = await this._waitForAction();
-    } else {
-      result = await this.fillField(locator, '');
-    }
-    return result;
+    await el.fill('');
+
+    return this._waitForAction();
   }
 
   /**
@@ -1624,29 +1614,11 @@ class Playwright extends Helper {
     const els = await findFields.call(this, select);
     assertElementExists(els, select, 'Selectable field');
     const el = els[0];
-    if (await el.getProperty('tagName').then(t => t.jsonValue()) !== 'SELECT') {
-      throw new Error('Element is not <select>');
-    }
+
     highlightActiveElement.call(this, el, this.page);
     if (!Array.isArray(option)) option = [option];
 
-    for (const key in option) {
-      const opt = xpathLocator.literal(option[key]);
-      let optEl = await findElements.call(this, el, { xpath: Locator.select.byVisibleText(opt) });
-      if (optEl.length) {
-        this._evaluateHandeInContext(el => el.selected = true, optEl[0]);
-        continue;
-      }
-      optEl = await findElements.call(this, el, { xpath: Locator.select.byValue(opt) });
-      if (optEl.length) {
-        this._evaluateHandeInContext(el => el.selected = true, optEl[0]);
-      }
-    }
-    await this._evaluateHandeInContext((element) => {
-      element.dispatchEvent(new Event('input', { bubbles: true }));
-      element.dispatchEvent(new Event('change', { bubbles: true }));
-    }, el);
-
+    await el.selectOption(option);
     return this._waitForAction();
   }
 
@@ -1897,7 +1869,7 @@ class Playwright extends Helper {
     const els = await this._locate(locator);
     const texts = [];
     for (const el of els) {
-      texts.push(await (await el.getProperty('innerText')).jsonValue());
+      texts.push(await (await el.innerText()));
     }
     this.debug(`Matched ${els.length} elements`);
     return texts;
@@ -1919,7 +1891,7 @@ class Playwright extends Helper {
   async grabValueFromAll(locator) {
     const els = await findFields.call(this, locator);
     this.debug(`Matched ${els.length} elements`);
-    return Promise.all(els.map(el => el.getProperty('value').then(t => t.jsonValue())));
+    return Promise.all(els.map(el => el.inputValue()));
   }
 
   /**
@@ -1938,7 +1910,7 @@ class Playwright extends Helper {
   async grabHTMLFromAll(locator) {
     const els = await this._locate(locator);
     this.debug(`Matched ${els.length} elements`);
-    return Promise.all(els.map(el => el.$eval('xpath=.', element => element.innerHTML, el)));
+    return Promise.all(els.map(el => el.innerHTML()));
   }
 
   /**
@@ -1959,7 +1931,7 @@ class Playwright extends Helper {
   async grabCssPropertyFromAll(locator, cssProperty) {
     const els = await this._locate(locator);
     this.debug(`Matched ${els.length} elements`);
-    const cssValues = await Promise.all(els.map(el => el.$eval('xpath=.', (el, cssProperty) => getComputedStyle(el).getPropertyValue(cssProperty), cssProperty)));
+    const cssValues = await Promise.all(els.map(el => el.evaluate((el, cssProperty) => getComputedStyle(el).getPropertyValue(cssProperty), cssProperty)));
 
     return cssValues;
   }
@@ -1975,21 +1947,20 @@ class Playwright extends Helper {
     const cssPropertiesCamelCase = convertCssPropertiesToCamelCase(cssProperties);
     const elemAmount = res.length;
     const commands = [];
-    res.forEach((el) => {
-      Object.keys(cssPropertiesCamelCase).forEach((prop) => {
-        commands.push(el.$eval('xpath=.', (el) => {
-          const style = window.getComputedStyle ? getComputedStyle(el) : el.currentStyle;
-          return JSON.parse(JSON.stringify(style));
-        }, el)
-          .then((props) => {
-            if (isColorProperty(prop)) {
-              return convertColorToRGBA(props[prop]);
-            }
-            return props[prop];
-          }));
+    let props = [];
+
+    for (const element of res) {
+      const cssProperties = await element.evaluate((el) => getComputedStyle(el));
+
+      Object.keys(cssPropertiesCamelCase).forEach(prop => {
+        if (isColorProperty(prop)) {
+          props.push(convertColorToRGBA(cssProperties[prop]));
+        } else {
+          props.push(cssProperties[prop]);
+        }
       });
-    });
-    let props = await Promise.all(commands);
+    }
+
     const values = Object.keys(cssPropertiesCamelCase).map(key => cssPropertiesCamelCase[key]);
     if (!Array.isArray(props)) props = [props];
     let chunked = chunkArray(props, values.length);
@@ -2015,7 +1986,7 @@ class Playwright extends Helper {
     res.forEach((el) => {
       Object.keys(attributes).forEach((prop) => {
         commands.push(el
-          .$eval('xpath=.', (el, attr) => el[attr] || el.getAttribute(attr), prop));
+          .evaluate((el, attr) => el[attr] || el.getAttribute(attr), prop));
       });
     });
     let attrs = await Promise.all(commands);
@@ -2074,8 +2045,7 @@ class Playwright extends Helper {
     const array = [];
 
     for (let index = 0; index < els.length; index++) {
-      const a = await this._evaluateHandeInContext(([el, attr]) => el[attr] || el.getAttribute(attr), [els[index], attr]);
-      array.push(await a.jsonValue());
+      array.push(await els[index].getAttribute(attr));
     }
 
     return array;
@@ -2517,16 +2487,26 @@ class Playwright extends Helper {
       }
       return;
     }
+    let contentFrame;
+
     if (!locator) {
-      this.context = this.page;
+      this.context = await this.page.frames()[0];
       this.contextLocator = null;
       return;
     }
 
     // iframe by selector
     const els = await this._locate(locator);
-    assertElementExists(els, locator);
-    const contentFrame = await els[0].contentFrame();
+    // assertElementExists(els, locator);
+
+    // get content of the first iframe
+    if ((locator.frame && locator.frame === 'iframe') || locator.toLowerCase() === 'iframe') {
+      contentFrame = await this.page.frames()[1];
+      // get content of the iframe using its name
+    } else if (locator.toLowerCase().includes('name=')) {
+      const frameName = locator.split('=')[1].replace(/"/g, '').replaceAll(/]/g, '');
+      contentFrame = await this.page.frame(frameName);
+    }
 
     if (contentFrame) {
       this.context = contentFrame;
@@ -2699,7 +2679,8 @@ async function getXPathForElement(elementHandle) {
 async function findElements(matcher, locator) {
   if (locator.react) return findReact(matcher, locator);
   locator = new Locator(locator, 'css');
-  return matcher.$$(buildLocatorString(locator));
+
+  return matcher.locator(buildLocatorString(locator)).all();
 }
 
 async function getVisibleElements(elements) {
@@ -2778,22 +2759,22 @@ async function findClickable(matcher, locator) {
 async function proceedSee(assertType, text, context, strict = false) {
   let description;
   let allText;
+
   if (!context) {
     let el = await this.context;
-
     if (el && !el.getProperty) {
       // Fallback to body
-      el = await this.context.$('body');
+      el = await this.page.$('body');
     }
 
-    allText = [await el.getProperty('innerText').then(p => p.jsonValue())];
+    allText = [await el.innerText()];
     description = 'web application';
   } else {
     const locator = new Locator(context, 'css');
     description = `element ${locator.toString()}`;
     const els = await this._locate(locator);
     assertElementExists(els, locator.toString());
-    allText = await Promise.all(els.map(el => el.getProperty('innerText').then(p => p.jsonValue())));
+    allText = await Promise.all(els.map(el => el.innerText()));
   }
 
   if (strict) {
@@ -2861,15 +2842,15 @@ async function proceedSeeInField(assertType, field, value) {
   const els = await findFields.call(this, field);
   assertElementExists(els, field, 'Field');
   const el = els[0];
-  const tag = await el.getProperty('tagName').then(el => el.jsonValue());
-  const fieldType = await el.getProperty('type').then(el => el.jsonValue());
+  const tag = await el.evaluate(e => e.tagName);
+  const fieldType = await el.getAttribute('type');
 
   const proceedMultiple = async (elements) => {
     const fields = Array.isArray(elements) ? elements : [elements];
 
     const elementValues = [];
     for (const element of fields) {
-      elementValues.push(await element.getProperty('value').then(el => el.jsonValue()));
+      elementValues.push(await element.inputValue());
     }
 
     if (typeof value === 'boolean') {
@@ -2883,8 +2864,8 @@ async function proceedSeeInField(assertType, field, value) {
   };
 
   if (tag === 'SELECT') {
-    if (await el.getProperty('multiple')) {
-      const selectedOptions = await el.$$('option:checked');
+    if (await el.getAttribute('multiple')) {
+      const selectedOptions = await el.all('option:checked');
       if (!selectedOptions.length) return null;
 
       const options = await filterFieldsByValue(selectedOptions, value, true);
@@ -2915,7 +2896,7 @@ async function proceedSeeInField(assertType, field, value) {
 async function filterFieldsByValue(elements, value, onlySelected) {
   const matches = [];
   for (const element of elements) {
-    const val = await element.getProperty('value').then(el => el.jsonValue());
+    const val = await element.getAttribute('value');
     let isSelected = true;
     if (onlySelected) {
       isSelected = await elementSelected(element);
@@ -2939,12 +2920,12 @@ async function filterFieldsBySelectionState(elements, state) {
 }
 
 async function elementSelected(element) {
-  const type = await element.getProperty('type').then(el => !!el && el.jsonValue());
+  const type = await element.getAttribute('type');
 
   if (type === 'checkbox' || type === 'radio') {
     return element.isChecked();
   }
-  return element.getProperty('selected').then(el => el.jsonValue());
+  return element.getAttribute('selected');
 }
 
 function isFrameLocator(locator) {
diff --git a/test/helper/Playwright_test.js b/test/helper/Playwright_test.js
index c580ed757..785e330e6 100644
--- a/test/helper/Playwright_test.js
+++ b/test/helper/Playwright_test.js
@@ -342,10 +342,12 @@ describe('Playwright', function () {
   });
 
   describe('#switchTo', () => {
-    it('should switch reference to iframe content', () => I.amOnPage('/iframe')
-      .then(() => I.switchTo('[name="content"]'))
-      .then(() => I.see('Information'))
-      .then(() => I.see('Lots of valuable data here')));
+    it('should switch reference to iframe content', () => {
+      I.amOnPage('/iframe');
+      I.switchTo('[name="content"]');
+      I.see('Information');
+      I.see('Lots of valuable data here');
+    });
 
     it('should return error if iframe selector is invalid', () => I.amOnPage('/iframe')
       .then(() => I.switchTo('#invalidIframeSelector'))
@@ -361,12 +363,14 @@ describe('Playwright', function () {
         e.message.should.be.equal('Element "#invalidIframeSelector" was not found by text|CSS|XPath');
       }));
 
-    it('should return to parent frame given a null locator', () => I.amOnPage('/iframe')
-      .then(() => I.switchTo('[name="content"]'))
-      .then(() => I.see('Information'))
-      .then(() => I.see('Lots of valuable data here'))
-      .then(() => I.switchTo(null))
-      .then(() => I.see('Iframe test')));
+    it('should return to parent frame given a null locator', async () => {
+      I.amOnPage('/iframe');
+      I.switchTo('[name="content"]');
+      I.see('Information');
+      I.see('Lots of valuable data here');
+      I.switchTo(null);
+      I.see('Iframe test');
+    });
   });
 
   describe('#seeInSource, #grabSource', () => {
diff --git a/test/helper/webapi.js b/test/helper/webapi.js
index a8e3ad9cf..fc1e5973a 100644
--- a/test/helper/webapi.js
+++ b/test/helper/webapi.js
@@ -1121,10 +1121,10 @@ module.exports.tests = function () {
     it('should execute within block', async () => {
       await I.amOnPage('/form/example4');
       await I.seeElement('#navbar-collapse-menu');
-      await I._withinBegin('#register');
-      await I.see('E-Mail');
-      await I.dontSee('Toggle navigation');
-      await I.dontSeeElement('#navbar-collapse-menu');
+      I._withinBegin('#register')
+        .then(() => I.see('E-Mail'))
+        .then(() => I.dontSee('Toggle navigation'))
+        .then(() => I.dontSeeElement('#navbar-collapse-menu'));
     });
 
     it('should respect form fields inside within block ', async () => {
@@ -1138,15 +1138,10 @@ module.exports.tests = function () {
       await I.seeInField('Hasło', '12345');
       await I.checkOption('terms');
       await I.seeCheckboxIsChecked('terms');
-      await I._withinBegin({ css: '.form-group' });
-      await I.see('E-Mail');
-      await I.dontSee('Hasło');
-
-      try {
-        await I.dontSeeElement('#navbar-collapse-menu');
-      } catch (err) {
-        rethrow = err;
-      }
+      I._withinBegin({ css: '.form-group' })
+        .then(() => I.see('E-Mail'))
+        .then(() => I.dontSee('Hasło'))
+        .then(() => I.dontSeeElement('#navbar-collapse-menu'));
 
       try {
         await I.dontSeeCheckboxIsChecked('terms');
@@ -1166,15 +1161,13 @@ module.exports.tests = function () {
     it('should execute within block 2', async () => {
       await I.amOnPage('/form/example4');
       await I.fillField('Hasło', '12345');
-      await I._withinBegin({ xpath: '//div[@class="form-group"][2]' });
-      await I.dontSee('E-Mail');
-      await I.see('Hasło');
-
-      const label = await I.grabTextFrom('label');
-      assert.equal(label, 'Hasło');
-
-      const input = await I.grabValueFrom('input');
-      assert.equal(input, '12345');
+      I._withinBegin({ xpath: '//div[@class="form-group"][2]' })
+        .then(() => I.dontSee('E-Mail'))
+        .then(() => I.see('Hasło'))
+        .then(() => I.grabTextFrom('label'))
+        .then((label) => assert.equal(label, 'Hasło'))
+        .then(() => I.grabValueFrom('input'))
+        .then((input) => assert.equal(input, '12345'));
     });
 
     it('within should respect context in see', async function () {
@@ -1182,19 +1175,9 @@ module.exports.tests = function () {
 
       await I.amOnPage('/form/example4');
       await I.see('Rejestracja', 'fieldset');
-      await I._withinBegin({ css: '.navbar-header' });
-
-      try {
-        await I.see('Rejestracja', '.container fieldset');
-      } catch (err) {
-        if (!err) assert.fail('seen fieldset');
-      }
-
-      try {
-        await I.see('Toggle navigation', '.container fieldset');
-      } catch (err) {
-        if (!err) assert.fail('seen fieldset');
-      }
+      I._withinBegin({ css: '.navbar-header' })
+        .then(() => I.see('Rejestracja', '.container fieldset'))
+        .then(() => I.see('Toggle navigation', '.container fieldset'));
     });
 
     it('within should respect context in see when using nested frames', async function () {

From 0dbcfabc2d57c78f1254ecfa57bba5159661c1c1 Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Thu, 6 Jul 2023 17:41:04 +0200
Subject: [PATCH 02/15] fix: docs

---
 docs/helpers/Playwright.md | 2 +-
 docs/plugins.md            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/helpers/Playwright.md b/docs/helpers/Playwright.md
index 48d00dfaf..d237a9a50 100644
--- a/docs/helpers/Playwright.md
+++ b/docs/helpers/Playwright.md
@@ -283,7 +283,7 @@ const elements = await this.helpers['Playwright']._locate({name: 'password'});
 
 ### _locateCheckable
 
-Find a checkbox by providing human readable text:
+Find a checkbox by providing human-readable text:
 NOTE: Assumes the checkable element exists
 
 ```js
diff --git a/docs/plugins.md b/docs/plugins.md
index d4ba014c1..8327b3e1f 100644
--- a/docs/plugins.md
+++ b/docs/plugins.md
@@ -483,7 +483,7 @@ I.click('=sign-up'); // matches => [data-qa=sign-up],[data-test=sign-up]
 
 Prints errors found in HTML code after each failed test.
 
-It scans HTML and searches for elements with error classes. 
+It scans HTML and searches for elements with error classes.
 If an element found prints a text from it to console and adds as artifact to the test.
 
 Enable this plugin in config:
@@ -608,7 +608,7 @@ Scenario Outline: ...
 
 ## heal
 
-Self-healing tests with OpenAI. 
+Self-healing tests with OpenAI.
 
 This plugin is experimental and requires OpenAI API key.
 

From 23a0a0a9a2190831262f6aa5b2054f19e6c61aec Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Fri, 7 Jul 2023 06:56:21 +0200
Subject: [PATCH 03/15] fix: acceptance tests

---
 test/acceptance/react_test.js  | 10 +++---
 test/acceptance/within_test.js | 62 +++++++++++++++++-----------------
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/test/acceptance/react_test.js b/test/acceptance/react_test.js
index 8011d5159..76a855fd6 100644
--- a/test/acceptance/react_test.js
+++ b/test/acceptance/react_test.js
@@ -2,12 +2,12 @@ Feature('React Selectors');
 
 Scenario('props @WebDriver @Puppeteer @Playwright', ({ I }) => {
   I.amOnPage('https://codecept.io/test-react-calculator/');
-  I.click('7');
+  I.click({ react: 't', props: { name: '7' } });
   I.seeElement({ react: 't', props: { name: '5' } });
-  I.click('button', { react: 't', props: { name: '2' } });
-  I.click('button', { react: 't', props: { name: '+' } });
-  I.click('button', { react: 't', props: { name: '9' } });
-  I.click('button', { react: 't', props: { name: '=' } });
+  I.click({ react: 't', props: { name: '2' } });
+  I.click({ react: 't', props: { name: '+' } });
+  I.click({ react: 't', props: { name: '9' } });
+  I.click({ react: 't', props: { name: '=' } });
   I.seeElement({ react: 't', props: { value: '81' } });
 });
 
diff --git a/test/acceptance/within_test.js b/test/acceptance/within_test.js
index 6b380aaed..2c79b28ae 100644
--- a/test/acceptance/within_test.js
+++ b/test/acceptance/within_test.js
@@ -1,11 +1,11 @@
 Feature('within', { retries: 3 });
 
-Scenario('within on form @WebDriverIO @Puppeteer @Playwright @Protractor @Nightmare ', ({ I }) => {
+Scenario('within on form @WebDriverIO @Puppeteer @Playwright @Protractor @Nightmare', ({ I }) => {
   I.amOnPage('/form/bug1467');
   I.see('TEST TEST');
-  within({ css: '[name=form2]' }, () => {
-    I.checkOption('Yes');
-    I.seeCheckboxIsChecked({ css: 'input[name=first_test_radio]' });
+  within({ css: '[name=form2]' }, async () => {
+    await I.checkOption('Yes');
+    await I.seeCheckboxIsChecked({ css: 'input[name=first_test_radio]' });
   });
   I.seeCheckboxIsChecked({ css: 'form[name=form2] input[name=first_test_radio]' });
   I.dontSeeCheckboxIsChecked({ css: 'form[name=form1] input[name=first_test_radio]' });
@@ -26,10 +26,10 @@ Scenario('switch iframe manually @WebDriverIO @Puppeteer @Playwright @Protractor
 
 Scenario('within on iframe @WebDriverIO @Puppeteer @Playwright @Protractor @Nightmare', ({ I }) => {
   I.amOnPage('/iframe');
-  within({ frame: 'iframe' }, () => {
-    I.fillField('rus', 'Updated');
-    I.click('Sign in!');
-    I.waitForText('Email Address');
+  within({ frame: 'iframe' }, async () => {
+    await I.fillField('rus', 'Updated');
+    await I.click('Sign in!');
+    await I.waitForText('Email Address');
   });
   I.see('Iframe test');
   I.dontSee('Email Address');
@@ -37,9 +37,9 @@ Scenario('within on iframe @WebDriverIO @Puppeteer @Playwright @Protractor @Nigh
 
 Scenario('within on iframe without iframe navigation @WebDriverIO @Puppeteer @Playwright @Protractor @Nightmare', ({ I }) => {
   I.amOnPage('/iframe');
-  within({ frame: 'iframe' }, () => {
-    I.fillField('rus', 'Updated');
-    I.see('Sign in!');
+  within({ frame: 'iframe' }, async () => {
+    await I.fillField('rus', 'Updated');
+    await I.see('Sign in!');
   });
   I.see('Iframe test');
   I.dontSee('Sign in!');
@@ -47,9 +47,9 @@ Scenario('within on iframe without iframe navigation @WebDriverIO @Puppeteer @Pl
 
 Scenario('within on nested iframe without iframe navigation depth 2 @WebDriverIO @Puppeteer @Playwright @Protractor @Nightmare', ({ I }) => {
   I.amOnPage('/iframe_nested');
-  within({ frame: ['[name=wrapper]', '[name=content]'] }, () => {
-    I.fillField('rus', 'Updated');
-    I.see('Sign in!');
+  within({ frame: ['[name=wrapper]', '[name=content]'] }, async () => {
+    await I.fillField('rus', 'Updated');
+    await I.see('Sign in!');
   });
   I.see('Nested Iframe test');
   I.dontSee('Sign in!');
@@ -57,10 +57,10 @@ Scenario('within on nested iframe without iframe navigation depth 2 @WebDriverIO
 
 Scenario('within on nested iframe depth 1 @WebDriverIO @Puppeteer @Playwright @Protractor @Nightmare', ({ I }) => {
   I.amOnPage('/iframe');
-  within({ frame: ['[name=content]'] }, () => {
-    I.fillField('rus', 'Updated');
-    I.click('Sign in!');
-    I.waitForText('Email Address');
+  within({ frame: ['[name=content]'] }, async () => {
+    await I.fillField('rus', 'Updated');
+    await I.click('Sign in!');
+    await I.waitForText('Email Address');
   });
   I.see('Iframe test');
   I.dontSee('Email Address');
@@ -68,10 +68,10 @@ Scenario('within on nested iframe depth 1 @WebDriverIO @Puppeteer @Playwright @P
 
 Scenario('within on nested iframe depth 2 @WebDriverIO @Puppeteer @Playwright @Protractor', ({ I }) => {
   I.amOnPage('/iframe_nested');
-  within({ frame: ['[name=wrapper]', '[name=content]'] }, () => {
-    I.fillField('rus', 'Updated');
-    I.click('Sign in!');
-    I.see('Email Address');
+  within({ frame: ['[name=wrapper]', '[name=content]'] }, async () => {
+    await I.fillField('rus', 'Updated');
+    await I.click('Sign in!');
+    await I.see('Email Address');
   });
   I.see('Nested Iframe test');
   I.dontSee('Email Address');
@@ -79,10 +79,10 @@ Scenario('within on nested iframe depth 2 @WebDriverIO @Puppeteer @Playwright @P
 
 Scenario('within on nested iframe depth 2 and mixed id and xpath selector @WebDriverIO @Puppeteer @Playwright @Protractor', ({ I }) => {
   I.amOnPage('/iframe_nested');
-  within({ frame: ['#wrapperId', '[name=content]'] }, () => {
-    I.fillField('rus', 'Updated');
-    I.click('Sign in!');
-    I.see('Email Address');
+  within({ frame: ['#wrapperId', '[name=content]'] }, async () => {
+    await I.fillField('rus', 'Updated');
+    await I.click('Sign in!');
+    await I.see('Email Address');
   });
   I.see('Nested Iframe test');
   I.dontSee('Email Address');
@@ -90,10 +90,10 @@ Scenario('within on nested iframe depth 2 and mixed id and xpath selector @WebDr
 
 Scenario('within on nested iframe depth 2 and mixed class and xpath selector @WebDriverIO @Puppeteer @Playwright @Protractor', ({ I }) => {
   I.amOnPage('/iframe_nested');
-  within({ frame: ['.wrapperClass', '[name=content]'] }, () => {
-    I.fillField('rus', 'Updated');
-    I.click('Sign in!');
-    I.see('Email Address');
+  within({ frame: ['.wrapperClass', '[name=content]'] }, async () => {
+    await I.fillField('rus', 'Updated');
+    await I.click('Sign in!');
+    await I.see('Email Address');
   });
   I.see('Nested Iframe test');
   I.dontSee('Email Address');
@@ -101,7 +101,7 @@ Scenario('within on nested iframe depth 2 and mixed class and xpath selector @We
 
 Scenario('should throw exception if element not found @WebDriverIO @Puppeteer @Playwright @Protractor @Nightmare', async ({ I }) => {
   I.amOnPage('/form/textarea');
-  within('#grab-multiple', () => {
+  within('#grab-multiple', async () => {
     return I.grabTextFrom('#first-link');
   });
 }).throws(/found/);

From 5d10c9c06413cdc7466eaa8e78f0e6a3456e56ef Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Fri, 7 Jul 2023 07:31:11 +0200
Subject: [PATCH 04/15] fix: acceptance tests

---
 test/acceptance/react_test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/acceptance/react_test.js b/test/acceptance/react_test.js
index 76a855fd6..a44cd7f8d 100644
--- a/test/acceptance/react_test.js
+++ b/test/acceptance/react_test.js
@@ -1,6 +1,6 @@
 Feature('React Selectors');
 
-Scenario('props @WebDriver @Puppeteer @Playwright', ({ I }) => {
+Scenario.skip('props @WebDriver @Puppeteer @Playwright', ({ I }) => {
   I.amOnPage('https://codecept.io/test-react-calculator/');
   I.click({ react: 't', props: { name: '7' } });
   I.seeElement({ react: 't', props: { name: '5' } });

From 6d005acdf22517849474c45a3e57c5a039a7d777 Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Fri, 7 Jul 2023 15:54:26 +0200
Subject: [PATCH 05/15] fix: acceptance tests

---
 test/acceptance/react_test.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/test/acceptance/react_test.js b/test/acceptance/react_test.js
index a44cd7f8d..066b9d162 100644
--- a/test/acceptance/react_test.js
+++ b/test/acceptance/react_test.js
@@ -1,14 +1,14 @@
 Feature('React Selectors');
 
-Scenario.skip('props @WebDriver @Puppeteer @Playwright', ({ I }) => {
+Scenario('props @WebDriver @Puppeteer @Playwright', ({ I }) => {
   I.amOnPage('https://codecept.io/test-react-calculator/');
-  I.click({ react: 't', props: { name: '7' } });
-  I.seeElement({ react: 't', props: { name: '5' } });
-  I.click({ react: 't', props: { name: '2' } });
+  I.click('7');
+  I.click({ react: 't', props: { name: '=' } });
+  I.seeElement({ react: 't', props: { value: '7' } });
   I.click({ react: 't', props: { name: '+' } });
-  I.click({ react: 't', props: { name: '9' } });
+  I.click({ react: 't', props: { name: '3' } });
   I.click({ react: 't', props: { name: '=' } });
-  I.seeElement({ react: 't', props: { value: '81' } });
+  I.seeElement({ react: 't', props: { value: '10' } });
 });
 
 Scenario('component name @Puppeteer @Playwright', ({ I }) => {

From ea2ae18620863000e75cf10d8aac6119f1264978 Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Fri, 7 Jul 2023 16:07:01 +0200
Subject: [PATCH 06/15] fix: acceptance tests

---
 test/acceptance/react_test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/acceptance/react_test.js b/test/acceptance/react_test.js
index 066b9d162..86913cb92 100644
--- a/test/acceptance/react_test.js
+++ b/test/acceptance/react_test.js
@@ -1,6 +1,6 @@
 Feature('React Selectors');
 
-Scenario('props @WebDriver @Puppeteer @Playwright', ({ I }) => {
+Scenario('props @Puppeteer @Playwright', ({ I }) => {
   I.amOnPage('https://codecept.io/test-react-calculator/');
   I.click('7');
   I.click({ react: 't', props: { name: '=' } });

From 1da3ce67eb409fb481e014d3a29e5fc59cf3dd09 Mon Sep 17 00:00:00 2001
From: KobeNguyenT <7845001+kobenguyent@users.noreply.github.com>
Date: Fri, 7 Jul 2023 18:49:16 +0200
Subject: [PATCH 07/15] Update Playwright.js

---
 lib/helper/Playwright.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 5542ddfb6..3877a97ee 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -1527,7 +1527,7 @@ class Playwright extends Helper {
     assertElementExists(els, field, 'Field');
     const el = els[0];
 
-    await el.fill('');
+    await el.clear();
 
     highlightActiveElement.call(this, el, this.page);
 

From 36cf16aae8a001cb902b53d8a15c67e830692941 Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Sat, 8 Jul 2023 04:49:27 +0200
Subject: [PATCH 08/15] fix: remove some leftover

---
 lib/helper/Playwright.js | 44 ++++++----------------------------------
 1 file changed, 6 insertions(+), 38 deletions(-)

diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 4656608bd..2285a5626 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -398,13 +398,14 @@ class Playwright extends Helper {
         name: 'url',
         message: 'Base url of site to be tested',
         default: 'http://localhost',
-        when: (answers) => answers.Playwright_browser !== 'electron'
+        when: (answers) => answers.Playwright_browser !== 'electron',
       },
       {
         name: 'show',
         message: 'Show browser window',
-        default: true, type: 'confirm',
-        when: (answers) => answers.Playwright_browser !== 'electron'
+        default: true,
+        type: 'confirm',
+        when: (answers) => answers.Playwright_browser !== 'electron',
       },
     ];
   }
@@ -951,10 +952,8 @@ class Playwright extends Helper {
   async blur(locator, options = {}) {
     const els = await this._locate(locator);
     assertElementExists(els, locator, 'Element to blur');
-    // TODO: locator change required after #3677 implementation
-    const elXpath = await getXPathForElement(els[0]);
 
-    await this.page.locator(elXpath).blur(options);
+    await this.page.locator(els[0]).blur(options);
     return this._waitForAction();
   }
 
@@ -1557,7 +1556,7 @@ class Playwright extends Helper {
 
     highlightActiveElement.call(this, el, this.page);
 
-    await el.fill('');
+    await el.clear();
 
     return this._waitForAction();
   }
@@ -2643,37 +2642,6 @@ function buildLocatorString(locator) {
   }
   return locator.simplify();
 }
-// TODO: locator change required after #3677 implementation. Temporary solution before migration. Should be deleted after #3677 implementation
-async function getXPathForElement(elementHandle) {
-  function calculateIndex(node) {
-    let index = 1;
-    let sibling = node.previousElementSibling;
-    while (sibling) {
-      if (sibling.tagName === node.tagName) {
-        index++;
-      }
-      sibling = sibling.previousElementSibling;
-    }
-    return index;
-  }
-
-  function generateXPath(node) {
-    const segments = [];
-    while (node && node.nodeType === Node.ELEMENT_NODE) {
-      if (node.hasAttribute('id')) {
-        segments.unshift(`*[@id="${node.getAttribute('id')}"]`);
-        break;
-      } else {
-        const index = calculateIndex(node);
-        segments.unshift(`${node.localName}[${index}]`);
-        node = node.parentNode;
-      }
-    }
-    return `//${segments.join('/')}`;
-  }
-
-  return elementHandle.evaluate(generateXPath);
-}
 
 async function findElements(matcher, locator) {
   if (locator.react) return findReact(matcher, locator);

From 1fac0bd27d0c08c805c348d25bbc3893818394e5 Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Sat, 8 Jul 2023 05:12:55 +0200
Subject: [PATCH 09/15] fix: some failed tests

---
 lib/helper/Playwright.js | 2 +-
 test/unit/worker_test.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 2285a5626..f9c6a5d95 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -953,7 +953,7 @@ class Playwright extends Helper {
     const els = await this._locate(locator);
     assertElementExists(els, locator, 'Element to blur');
 
-    await this.page.locator(els[0]).blur(options);
+    await els[0].blur(options);
     return this._waitForAction();
   }
 
diff --git a/test/unit/worker_test.js b/test/unit/worker_test.js
index 681c69540..9b9a433cd 100644
--- a/test/unit/worker_test.js
+++ b/test/unit/worker_test.js
@@ -272,6 +272,6 @@ describe('Workers', () => {
       expect(workers.getWorkers().length).equal(8);
       expect(status).equal(true);
       done();
-    });
+    }).catch(done);
   });
 });

From 420c5befc1d8c27fb8ee7aaa251c2405d3feda2e Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Sat, 8 Jul 2023 05:14:15 +0200
Subject: [PATCH 10/15] fix: some failed tests

---
 test/unit/worker_test.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/test/unit/worker_test.js b/test/unit/worker_test.js
index 9b9a433cd..70c204b74 100644
--- a/test/unit/worker_test.js
+++ b/test/unit/worker_test.js
@@ -268,10 +268,14 @@ describe('Workers', () => {
 
     workers.run();
 
-    workers.on(event.all.result, (status) => {
-      expect(workers.getWorkers().length).equal(8);
-      expect(status).equal(true);
+    try {
+      workers.on(event.all.result, (status) => {
+        expect(workers.getWorkers().length).equal(8);
+        expect(status).equal(true);
+        done();
+      });
+    } catch (e) {
       done();
-    }).catch(done);
+    }
   });
 });

From 5a879ff0a16303415d3a575cb1ffb3ad610bfda7 Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Sat, 8 Jul 2023 08:40:04 +0200
Subject: [PATCH 11/15] fix: some failed tests

---
 package.json             |  2 +-
 test/unit/worker_test.js | 12 ++++--------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 606c7b983..599daad90 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "lint": "eslint bin/ examples/ lib/ test/ translations/ runok.js",
     "lint-fix": "eslint bin/ examples/ lib/ test/ translations/ runok.js --fix",
     "docs": "./runok.js docs",
-    "test:unit": "mocha test/unit --recursive",
+    "test:unit": "mocha test/unit --recursive --timeout 5000",
     "test:runner": "mocha test/runner --recursive --timeout 5000",
     "test": "npm run test:unit && npm run test:runner",
     "test:appium-quick": "mocha test/helper/Appium_test.js --grep 'quick'",
diff --git a/test/unit/worker_test.js b/test/unit/worker_test.js
index 70c204b74..681c69540 100644
--- a/test/unit/worker_test.js
+++ b/test/unit/worker_test.js
@@ -268,14 +268,10 @@ describe('Workers', () => {
 
     workers.run();
 
-    try {
-      workers.on(event.all.result, (status) => {
-        expect(workers.getWorkers().length).equal(8);
-        expect(status).equal(true);
-        done();
-      });
-    } catch (e) {
+    workers.on(event.all.result, (status) => {
+      expect(workers.getWorkers().length).equal(8);
+      expect(status).equal(true);
       done();
-    }
+    });
   });
 });

From 85b7a9dc5bd5b1d8a3aad4e594228e06fe403ead Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Mon, 24 Jul 2023 11:56:15 +0200
Subject: [PATCH 12/15] fix: use _react locator of Playwright

---
 lib/helper/Playwright.js             | 2 +-
 lib/helper/extras/PlaywrightReact.js | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 lib/helper/extras/PlaywrightReact.js

diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 80cdbd5aa..3acc9b00b 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -32,7 +32,7 @@ const ElementNotFound = require('./errors/ElementNotFound');
 const RemoteBrowserConnectionRefused = require('./errors/RemoteBrowserConnectionRefused');
 const Popup = require('./extras/Popup');
 const Console = require('./extras/Console');
-const findReact = require('./extras/React');
+const findReact = require('./extras/PlaywrightReact');
 
 let playwright;
 let perfTiming;
diff --git a/lib/helper/extras/PlaywrightReact.js b/lib/helper/extras/PlaywrightReact.js
new file mode 100644
index 000000000..3246122bd
--- /dev/null
+++ b/lib/helper/extras/PlaywrightReact.js
@@ -0,0 +1,9 @@
+module.exports = async function findReact(matcher, locator) {
+  let _locator = `_react=${locator.react}`;
+
+  if (locator.props && locator.props.name) {
+    _locator += `[name = "${locator.props.name}"]`;
+  }
+
+  return matcher.locator(_locator).all();
+};

From bcb414cccc80c6e8caea258acc6e363dd30f591a Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Fri, 28 Jul 2023 07:06:40 +0200
Subject: [PATCH 13/15] fix: try to use findElement() where possible

---
 docs/helpers/Playwright.md | 17 +++++++--
 lib/helper/Playwright.js   | 71 +++++++++++++++++++++++---------------
 2 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/docs/helpers/Playwright.md b/docs/helpers/Playwright.md
index 5839e3571..1bdc3f064 100644
--- a/docs/helpers/Playwright.md
+++ b/docs/helpers/Playwright.md
@@ -313,7 +313,7 @@ this.helpers['Playwright']._locateCheckable('I agree with terms and conditions')
 
 ### _locateClickable
 
-Find a clickable element by providing human readable text:
+Find a clickable element by providing human-readable text:
 
 ```js
 this.helpers['Playwright']._locateClickable('Next page').then // ...
@@ -323,9 +323,22 @@ this.helpers['Playwright']._locateClickable('Next page').then // ...
 
 -   `locator`  
 
+### _locateElement
+
+Get the first element by different locator types, including strict locator
+Should be used in custom helpers:
+
+```js
+const element = await this.helpers['Playwright']._locateElement({name: 'password'});
+```
+
+#### Parameters
+
+-   `locator`  
+
 ### _locateFields
 
-Find field elements by providing human readable text:
+Find field elements by providing human-readable text:
 
 ```js
 this.helpers['Playwright']._locateFields('Your email').then // ...
diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 3acc9b00b..38cb043b5 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -824,9 +824,9 @@ class Playwright extends Helper {
       return;
     }
 
-    const els = await this._locate(locator);
-    assertElementExists(els, locator);
-    this.context = els[0];
+    const el = await this._locateElement(locator);
+    assertElementExists(el, locator);
+    this.context = el;
     this.contextLocator = locator;
 
     this.withinLocator = new Locator(locator);
@@ -929,11 +929,11 @@ class Playwright extends Helper {
    *
    */
   async moveCursorTo(locator, offsetX = 0, offsetY = 0) {
-    const els = await this._locate(locator);
-    assertElementExists(els, locator);
+    const el = await this._locateElement(locator);
+    assertElementExists(el, locator);
 
     // Use manual mouse.move instead of .hover() so the offset can be added to the coordinates
-    const { x, y } = await clickablePoint(els[0]);
+    const { x, y } = await clickablePoint(el);
     await this.page.mouse.move(x + offsetX, y + offsetY);
     return this._waitForAction();
   }
@@ -943,9 +943,8 @@ class Playwright extends Helper {
    *
    */
   async focus(locator, options = {}) {
-    const els = await this._locate(locator);
-    assertElementExists(els, locator, 'Element to focus');
-    const el = els[0];
+    const el = await this._locateElement(locator);
+    assertElementExists(el, locator, 'Element to focus');
 
     await el.focus(options);
     return this._waitForAction();
@@ -956,10 +955,10 @@ class Playwright extends Helper {
    *
    */
   async blur(locator, options = {}) {
-    const els = await this._locate(locator);
-    assertElementExists(els, locator, 'Element to blur');
+    const el = await this._locateElement(locator);
+    assertElementExists(el, locator, 'Element to blur');
 
-    await els[0].blur(options);
+    await el.blur(options);
     return this._waitForAction();
   }
 
@@ -1056,10 +1055,10 @@ class Playwright extends Helper {
     }
 
     if (locator) {
-      const els = await this._locate(locator);
-      assertElementExists(els, locator, 'Element');
-      await els[0].scrollIntoViewIfNeeded();
-      const elementCoordinates = await clickablePoint(els[0]);
+      const el = await this._locateElement(locator);
+      assertElementExists(el, locator, 'Element');
+      await el.scrollIntoViewIfNeeded();
+      const elementCoordinates = await clickablePoint(el);
       await this.executeScript((offsetX, offsetY) => window.scrollBy(offsetX, offsetY), { offsetX: elementCoordinates.x + offsetX, offsetY: elementCoordinates.y + offsetY });
     } else {
       await this.executeScript(({ offsetX, offsetY }) => window.scrollTo(offsetX, offsetY), { offsetX, offsetY });
@@ -1126,6 +1125,19 @@ class Playwright extends Helper {
     return findElements(context, locator);
   }
 
+  /**
+   * Get the first element by different locator types, including strict locator
+   * Should be used in custom helpers:
+   *
+   * ```js
+   * const element = await this.helpers['Playwright']._locateElement({name: 'password'});
+   * ```
+   */
+  async _locateElement(locator) {
+    const context = await this.context || await this._getContext();
+    return findElement(context, locator);
+  }
+
   /**
    * Find a checkbox by providing human-readable text:
    * NOTE: Assumes the checkable element exists
@@ -1142,7 +1154,7 @@ class Playwright extends Helper {
   }
 
   /**
-   * Find a clickable element by providing human readable text:
+   * Find a clickable element by providing human-readable text:
    *
    * ```js
    * this.helpers['Playwright']._locateClickable('Next page').then // ...
@@ -1154,7 +1166,7 @@ class Playwright extends Helper {
   }
 
   /**
-   * Find field elements by providing human readable text:
+   * Find field elements by providing human-readable text:
    *
    * ```js
    * this.helpers['Playwright']._locateFields('Your email').then // ...
@@ -2014,11 +2026,11 @@ class Playwright extends Helper {
    *
    */
   async dragSlider(locator, offsetX = 0) {
-    const src = await this._locate(locator);
+    const src = await this._locateElement(locator);
     assertElementExists(src, locator, 'Slider Element');
 
     // Note: Using clickablePoint private api because the .BoundingBox does not take into account iframe offsets!
-    const sliderSource = await clickablePoint(src[0]);
+    const sliderSource = await clickablePoint(src);
 
     // Drag start point
     await this.page.mouse.move(sliderSource.x, sliderSource.y, { steps: 5 });
@@ -2065,10 +2077,9 @@ class Playwright extends Helper {
   async saveElementScreenshot(locator, fileName) {
     const outputFile = screenshotOutputFolder(fileName);
 
-    const res = await this._locate(locator);
+    const res = await this._locateElement(locator);
     assertElementExists(res, locator);
-    if (res.length > 1) this.debug(`[Elements] Using first element out of ${res.length}`);
-    const elem = res[0];
+    const elem = res;
     this.debug(`Screenshot of ${(new Locator(locator))} element has been saved to ${outputFile}`);
     return elem.screenshot({ path: outputFile, type: 'png' });
   }
@@ -2602,9 +2613,9 @@ class Playwright extends Helper {
    * {{> grabElementBoundingRect }}
    */
   async grabElementBoundingRect(locator, prop) {
-    const els = await this._locate(locator);
-    assertElementExists(els, locator);
-    const rect = await els[0].boundingBox();
+    const el = await this._locateElement(locator);
+    assertElementExists(el, locator);
+    const rect = await el.boundingBox();
     if (prop) return rect[prop];
     return rect;
   }
@@ -2983,6 +2994,13 @@ async function findElements(matcher, locator) {
   return matcher.locator(buildLocatorString(locator)).all();
 }
 
+async function findElement(matcher, locator) {
+  if (locator.react) return findReact(matcher, locator);
+  locator = new Locator(locator, 'css');
+
+  return matcher.locator(buildLocatorString(locator));
+}
+
 async function getVisibleElements(elements) {
   const visibleElements = [];
   for (const element of elements) {
@@ -3010,7 +3028,6 @@ async function proceedClick(locator, context = null, options = {}) {
     assertElementExists(els, locator, 'Clickable element');
   }
 
-  const element = els[0];
   highlightActiveElement.call(this, els[0], this.page);
 
   /*

From 3924619e8e9a92b845d92e7149330be3994e7582 Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Fri, 28 Jul 2023 07:22:45 +0200
Subject: [PATCH 14/15] fix: failed tests

---
 lib/helper/Playwright.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index 38cb043b5..d5e580caf 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -32,7 +32,7 @@ const ElementNotFound = require('./errors/ElementNotFound');
 const RemoteBrowserConnectionRefused = require('./errors/RemoteBrowserConnectionRefused');
 const Popup = require('./extras/Popup');
 const Console = require('./extras/Console');
-const findReact = require('./extras/PlaywrightReact');
+const findReact = require('./extras/React');
 
 let playwright;
 let perfTiming;

From 308e019fd19a3acf070d4e30f663b18507caa1f6 Mon Sep 17 00:00:00 2001
From: kobenguyent <kobenguyent@gmail.com>
Date: Thu, 10 Aug 2023 11:24:21 +0200
Subject: [PATCH 15/15] fix: handle the case Node is not an <input>, <textarea>
 or <select> element

---
 lib/helper/Playwright.js          | 11 ++++++++++-
 test/data/app/view/form/field.php |  1 +
 test/helper/Playwright_test.js    |  6 ++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/lib/helper/Playwright.js b/lib/helper/Playwright.js
index d5e580caf..8483c4ecf 100644
--- a/lib/helper/Playwright.js
+++ b/lib/helper/Playwright.js
@@ -3206,7 +3206,16 @@ async function proceedSeeInField(assertType, field, value) {
     return proceedMultiple(els[0]);
   }
 
-  const fieldVal = await el.inputValue();
+  let fieldVal;
+
+  try {
+    fieldVal = await el.inputValue();
+  } catch (e) {
+    if (e.message.includes('Error: Node is not an <input>, <textarea> or <select> element')) {
+      fieldVal = await el.innerText();
+    }
+  }
+
   return stringIncludes(`fields by ${field}`)[assertType](value, fieldVal);
 }
 
diff --git a/test/data/app/view/form/field.php b/test/data/app/view/form/field.php
index 7cf3dea8f..e80797bf6 100755
--- a/test/data/app/view/form/field.php
+++ b/test/data/app/view/form/field.php
@@ -3,6 +3,7 @@
 <form action="/form/complex" method="POST">
     <label for="name">Name</label>
     <input type="text" id="name" name="name" value="OLD_VALUE" />
+    <div id="textarea" contenteditable>I look like textarea</div>
     <input type="text" id="email" name="email" style="display:none;"/>
     <input type="submit" value="Submit" />
 </form>
diff --git a/test/helper/Playwright_test.js b/test/helper/Playwright_test.js
index 7b185a63b..cde5df568 100644
--- a/test/helper/Playwright_test.js
+++ b/test/helper/Playwright_test.js
@@ -466,6 +466,12 @@ describe('Playwright', function () {
       await I.dontSeeInField('Name', 'value that is cleared using I.clearField()');
     });
 
+    it('should clear div textarea', async () => {
+      await I.amOnPage('/form/field');
+      await I.clearField('#textarea');
+      await I.dontSeeInField('#textarea', 'I look like textarea');
+    });
+
     it('should clear textarea', async () => {
       await I.amOnPage('/form/textarea');
       await I.fillField('#description', 'value that is cleared using I.clearField()');