feat: add context parameter to appendField, clearField, attachFile

lib/helper/Playwright.js

@@ -2278,24 +2278,10 @@ class Playwright extends Helper {
   }
 
   /**
-   * Clears the text input element: `<input>`, `<textarea>` or `[contenteditable]` .
-   *
-   *
-   * Examples:
-   *
-   * ```js
-   * I.clearField('.text-area')
-   *
-   * // if this doesn't work use force option
-   * I.clearField('#submit', { force: true })
-   * ```
-   * Use `force` to bypass the [actionability](https://playwright.dev/docs/actionability) checks.
-   *
-   * @param {CodeceptJS.LocatorOrString} locator field located by label|name|CSS|XPath|strict locator.
-   * @param {any} [options] [Additional options](https://playwright.dev/docs/api/class-locator#locator-clear) for available options object as 2nd argument.
+   * {{> clearField }}
    */
-  async clearField(locator, options = {}) {
-    const els = await findFields.call(this, locator)
+  async clearField(locator, context = null) {
+    const els = await findFields.call(this, locator, context)
     assertElementExists(els, locator, 'Field to clear')
     if (this.options.strict) assertOnlyOneElement(els, locator)
 
@@ -2311,8 +2297,8 @@ class Playwright extends Helper {
   /**
    * {{> appendField }}
    */
-  async appendField(field, value) {
-    const els = await findFields.call(this, field)
+  async appendField(field, value, context = null) {
+    const els = await findFields.call(this, field, context)
     assertElementExists(els, field, 'Field')
     if (this.options.strict) assertOnlyOneElement(els, field)
     await highlightActiveElement.call(this, els[0])
@@ -2341,13 +2327,13 @@ class Playwright extends Helper {
    * {{> attachFile }}
    *
    */
-  async attachFile(locator, pathToFile) {
+  async attachFile(locator, pathToFile, context = null) {
     const file = path.join(global.codecept_dir, pathToFile)
 
     if (!fileExists(file)) {
       throw new Error(`File at ${file} can not be found on local system`)
     }
-    const els = await findFields.call(this, locator)
+    const els = await findFields.call(this, locator, context)
     assertElementExists(els, locator, 'Field')
     await els[0].setInputFiles(file)
     return this._waitForAction()

lib/helper/Puppeteer.js

@@ -1580,17 +1580,17 @@ class Puppeteer extends Helper {
   /**
    * {{> clearField }}
    */
-  async clearField(field) {
-    return this.fillField(field, '')
+  async clearField(field, context = null) {
+    return this.fillField(field, '', context)
   }
 
   /**
    * {{> appendField }}
    *
    * {{ react }}
    */
-  async appendField(field, value) {
-    const els = await findVisibleFields.call(this, field)
+  async appendField(field, value, context = null) {
+    const els = await findVisibleFields.call(this, field, context)
     assertElementExists(els, field, 'Field')
     highlightActiveElement.call(this, els[0], await this._getContext())
     await els[0].press('End')
@@ -1619,13 +1619,13 @@ class Puppeteer extends Helper {
    *
    * {{> attachFile }}
    */
-  async attachFile(locator, pathToFile) {
+  async attachFile(locator, pathToFile, context = null) {
     const file = path.join(global.codecept_dir, pathToFile)
 
     if (!fileExists(file)) {
       throw new Error(`File at ${file} can not be found on local system`)
     }
-    const els = await findFields.call(this, locator)
+    const els = await findFields.call(this, locator, context)
     assertElementExists(els, locator, 'Field')
     await els[0].uploadFile(file)
     return this._waitForAction()

lib/helper/WebDriver.js

@@ -1289,8 +1289,8 @@ class WebDriver extends Helper {
    * {{> appendField }}
    * {{ react }}
    */
-  async appendField(field, value) {
-    const res = await findFields.call(this, field)
+  async appendField(field, value, context = null) {
+    const res = await findFields.call(this, field, context)
     assertElementExists(res, field, 'Field')
     const elem = usingFirstElement(res)
     highlightActiveElement.call(this, elem)
@@ -1301,8 +1301,8 @@ class WebDriver extends Helper {
    * {{> clearField }}
    *
    */
-  async clearField(field) {
-    const res = await findFields.call(this, field)
+  async clearField(field, context = null) {
+    const res = await findFields.call(this, field, context)
     assertElementExists(res, field, 'Field')
     const elem = usingFirstElement(res)
     highlightActiveElement.call(this, elem)
@@ -1344,13 +1344,13 @@ class WebDriver extends Helper {
    *
    * {{> attachFile }}
    */
-  async attachFile(locator, pathToFile) {
+  async attachFile(locator, pathToFile, context = null) {
     let file = path.join(global.codecept_dir, pathToFile)
     if (!fileExists(file)) {
       throw new Error(`File at ${file} can not be found on local system`)
     }
 
-    const res = await findFields.call(this, locator)
+    const res = await findFields.call(this, locator, context)
     this.debug(`Uploading ${file}`)
     assertElementExists(res, locator, 'File field')
     const el = usingFirstElement(res)

test/data/app/view/form/context.php

@@ -2,22 +2,26 @@
 <body>
 <div id="area1">
     <label for="name1">Name</label>
-    <input type="text" id="name1" name="name" value="" />
+    <input type="text" id="name1" name="name" value="old1" />
     <select name="age" id="age1">
         <option value="child">below 13</option>
         <option value="teenage">13-21</option>
         <option value="adult">21-60</option>
     </select>
+    <label for="file1">Avatar</label>
+    <input type="file" id="file1" name="avatar" />
     <button type="button">Submit</button>
 </div>
 <div id="area2">
     <label for="name2">Name</label>
-    <input type="text" id="name2" name="name" value="" />
+    <input type="text" id="name2" name="name" value="old2" />
     <select name="age" id="age2">
         <option value="child">below 13</option>
         <option value="teenage">13-21</option>
         <option value="adult">21-60</option>
     </select>
+    <label for="file2">Avatar</label>
+    <input type="file" id="file2" name="avatar" />
     <span class="unique-element">Only here</span>
 </div>
 </body>

test/helper/webapi.js

@@ -634,6 +634,31 @@ export function tests() {
       const val1 = await I.grabValueFrom('#age1')
       assert.equal(val1, 'child')
     })
+
+    it('should append field within context', async () => {
+      await I.amOnPage('/form/context')
+      await I.appendField('Name', '_appended', '#area2')
+      const val = await I.grabValueFrom('#name2')
+      assert.equal(val, 'old2_appended')
+      const val1 = await I.grabValueFrom('#name1')
+      assert.equal(val1, 'old1')
+    })
+
+    it('should clear field within context', async () => {
+      await I.amOnPage('/form/context')
+      await I.clearField('Name', '#area2')
+      await I.seeInField('#name2', '')
+      await I.seeInField('#name1', 'old1')
+    })
+
+    it('should attach file within context', async () => {
+      await I.amOnPage('/form/context')
+      await I.attachFile('Avatar', 'app/avatar.jpg', '#area2')
+      const val2 = await I.executeScript(() => document.getElementById('file2').files.length)
+      assert.equal(val2, 1, 'file2 should have a file attached')
+      const val1 = await I.executeScript(() => document.getElementById('file1').files.length)
+      assert.equal(val1, 0, 'file1 should have no files')
+    })
   })
 
   describe('#shadow DOM', () => {