codeceptjs 4.0.0-rc.1 → 4.0.0-rc.7

package/lib/helper/Playwright.js

@@ -23,7 +23,11 @@ import {
   clearString,
   requireWithFallback,
   normalizeSpacesInString,
+  normalizePath,
+  resolveUrl,
   relativeDir,
+  getMimeType,
+  base64EncodeFile,
 } from '../utils.js'
 import { isColorProperty, convertColorToRGBA } from '../colorUtils.js'
 import ElementNotFound from './errors/ElementNotFound.js'
@@ -1944,8 +1948,15 @@ class Playwright extends Helper {
    * {{> seeElement }}
    *
    */
-  async seeElement(locator) {
-    let els = await this._locate(locator)
+  async seeElement(locator, context = null) {
+    let els
+    if (context) {
+      const contextEls = await this._locate(context)
+      assertElementExists(contextEls, context, 'Context element')
+      els = await findElements.call(this, contextEls[0], locator)
+    } else {
+      els = await this._locate(locator)
+    }
     els = await Promise.all(els.map(el => el.isVisible()))
     try {
       return empty('visible elements').negate(els.filter(v => v).fill('ELEMENT'))
@@ -1958,8 +1969,15 @@ class Playwright extends Helper {
    * {{> dontSeeElement }}
    *
    */
-  async dontSeeElement(locator) {
-    let els = await this._locate(locator)
+  async dontSeeElement(locator, context = null) {
+    let els
+    if (context) {
+      const contextEls = await this._locate(context)
+      assertElementExists(contextEls, context, 'Context element')
+      els = await findElements.call(this, contextEls[0], locator)
+    } else {
+      els = await this._locate(locator)
+    }
     els = await Promise.all(els.map(el => el.isVisible()))
     try {
       return empty('visible elements').assert(els.filter(v => v).fill('ELEMENT'))
@@ -2245,8 +2263,8 @@ class Playwright extends Helper {
    * {{> fillField }}
    *
    */
-  async fillField(field, value) {
-    const els = await findFields.call(this, field)
+  async fillField(field, value, context = null) {
+    const els = await findFields.call(this, field, context)
     assertElementExists(els, field, 'Field')
     if (this.options.strict) assertOnlyOneElement(els, field)
     const el = els[0]
@@ -2262,24 +2280,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)
 
@@ -2295,8 +2299,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])
@@ -2308,63 +2312,94 @@ class Playwright extends Helper {
   /**
    * {{> seeInField }}
    */
-  async seeInField(field, value) {
+  async seeInField(field, value, context = null) {
     const _value = typeof value === 'boolean' ? value : value.toString()
-    return proceedSeeInField.call(this, 'assert', field, _value)
+    return proceedSeeInField.call(this, 'assert', field, _value, context)
   }
 
   /**
    * {{> dontSeeInField }}
    */
-  async dontSeeInField(field, value) {
+  async dontSeeInField(field, value, context = null) {
     const _value = typeof value === 'boolean' ? value : value.toString()
-    return proceedSeeInField.call(this, 'negate', field, _value)
+    return proceedSeeInField.call(this, 'negate', field, _value, context)
   }
 
   /**
    * {{> 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)
-    assertElementExists(els, locator, 'Field')
-    await els[0].setInputFiles(file)
+    const els = await findFields.call(this, locator, context)
+    if (els.length) {
+      const tag = await els[0].evaluate(el => el.tagName)
+      const type = await els[0].evaluate(el => el.type)
+      if (tag === 'INPUT' && type === 'file') {
+        await els[0].setInputFiles(file)
+        return this._waitForAction()
+      }
+    }
+
+    const targetEls = els.length ? els : await this._locate(locator)
+    assertElementExists(targetEls, locator, 'Element')
+    const base64Content = base64EncodeFile(file)
+    const fileName = path.basename(file)
+    const mimeType = getMimeType(fileName)
+    await targetEls[0].evaluate((el, { base64Content, fileName, mimeType }) => {
+      const binaryStr = atob(base64Content)
+      const bytes = new Uint8Array(binaryStr.length)
+      for (let i = 0; i < binaryStr.length; i++) bytes[i] = binaryStr.charCodeAt(i)
+      const fileObj = new File([bytes], fileName, { type: mimeType })
+      const dataTransfer = new DataTransfer()
+      dataTransfer.items.add(fileObj)
+      el.dispatchEvent(new DragEvent('dragenter', { dataTransfer, bubbles: true }))
+      el.dispatchEvent(new DragEvent('dragover', { dataTransfer, bubbles: true }))
+      el.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true }))
+    }, { base64Content, fileName, mimeType })
     return this._waitForAction()
   }
 
   /**
    * {{> selectOption }}
    */
-  async selectOption(select, option) {
-    const context = await this.context
+  async selectOption(select, option, context = null) {
+    const pageContext = await this.context
     const matchedLocator = new Locator(select)
 
+    let contextEl
+    if (context) {
+      const contextEls = await this._locate(context)
+      assertElementExists(contextEls, context, 'Context element')
+      contextEl = contextEls[0]
+    }
+
     // Strict locator
     if (!matchedLocator.isFuzzy()) {
       this.debugSection('SelectOption', `Strict: ${JSON.stringify(select)}`)
-      const els = await this._locate(matchedLocator)
+      const els = contextEl ? await findElements.call(this, contextEl, matchedLocator) : await this._locate(matchedLocator)
       assertElementExists(els, select, 'Selectable element')
-      return proceedSelect.call(this, context, els[0], option)
+      return proceedSelect.call(this, pageContext, els[0], option)
     }
 
     // Fuzzy: try combobox
     this.debugSection('SelectOption', `Fuzzy: "${matchedLocator.value}"`)
-    let els = await findByRole(context, { role: 'combobox', name: matchedLocator.value })
-    if (els?.length) return proceedSelect.call(this, context, els[0], option)
+    const comboboxSearchCtx = contextEl || pageContext
+    let els = await findByRole(comboboxSearchCtx, { role: 'combobox', name: matchedLocator.value })
+    if (els?.length) return proceedSelect.call(this, pageContext, els[0], option)
 
     // Fuzzy: try listbox
-    els = await findByRole(context, { role: 'listbox', name: matchedLocator.value })
-    if (els?.length) return proceedSelect.call(this, context, els[0], option)
+    els = await findByRole(comboboxSearchCtx, { role: 'listbox', name: matchedLocator.value })
+    if (els?.length) return proceedSelect.call(this, pageContext, els[0], option)
 
     // Fuzzy: try native select
-    els = await findFields.call(this, select)
+    els = await findFields.call(this, select, context)
     assertElementExists(els, select, 'Selectable element')
-    return proceedSelect.call(this, context, els[0], option)
+    return proceedSelect.call(this, pageContext, els[0], option)
   }
 
   /**
@@ -2405,6 +2440,26 @@ class Playwright extends Helper {
     urlEquals(this.options.url).negate(url, await this._getPageUrl())
   }
 
+  /**
+   * {{> seeCurrentPathEquals }}
+   */
+  async seeCurrentPathEquals(path) {
+    const currentUrl = await this._getPageUrl()
+    const baseUrl = this.options.url || 'http://localhost'
+    const actualPath = new URL(currentUrl, baseUrl).pathname
+    return equals('url path').assert(normalizePath(path), normalizePath(actualPath))
+  }
+
+  /**
+   * {{> dontSeeCurrentPathEquals }}
+   */
+  async dontSeeCurrentPathEquals(path) {
+    const currentUrl = await this._getPageUrl()
+    const baseUrl = this.options.url || 'http://localhost'
+    const actualPath = new URL(currentUrl, baseUrl).pathname
+    return equals('url path').negate(normalizePath(path), normalizePath(actualPath))
+  }
+
   /**
    * {{> see }}
    *
@@ -3362,6 +3417,7 @@ class Playwright extends Helper {
    */
   async waitInUrl(urlPart, sec = null) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout
+    const expectedUrl = resolveUrl(urlPart, this.options.url)
 
     return this.page
       .waitForFunction(
@@ -3369,13 +3425,13 @@ class Playwright extends Helper {
           const currUrl = decodeURIComponent(decodeURIComponent(decodeURIComponent(window.location.href)))
           return currUrl.indexOf(urlPart) > -1
         },
-        urlPart,
+        expectedUrl,
         { timeout: waitTimeout },
       )
       .catch(async e => {
-        const currUrl = await this._getPageUrl() // Required because the waitForFunction can't return data.
+        const currUrl = await this._getPageUrl()
         if (/Timeout/i.test(e.message)) {
-          throw new Error(`expected url to include ${urlPart}, but found ${currUrl}`)
+          throw new Error(`expected url to include ${expectedUrl}, but found ${currUrl}`)
         } else {
           throw e
         }
@@ -3387,26 +3443,46 @@ class Playwright extends Helper {
    */
   async waitUrlEquals(urlPart, sec = null) {
     const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout
-
-    const baseUrl = this.options.url
-    let expectedUrl = urlPart
-    if (urlPart.indexOf('http') < 0) {
-      expectedUrl = baseUrl + urlPart
-    }
+    const expectedUrl = resolveUrl(urlPart, this.options.url)
 
     try {
       await this.page.waitForURL(
-        url => url.href.includes(expectedUrl),
+        url => url.href === expectedUrl,
         { timeout: waitTimeout },
       )
     } catch (e) {
       const currUrl = await this._getPageUrl()
       if (/Timeout/i.test(e.message)) {
-        if (!currUrl.includes(expectedUrl)) {
-          throw new Error(`expected url to be ${expectedUrl}, but found ${currUrl}`)
-        } else {
-          throw new Error(`expected url not loaded, error message: ${e.message}`)
-        }
+        throw new Error(`expected url to be ${expectedUrl}, but found ${currUrl}`)
+      } else {
+        throw e
+      }
+    }
+  }
+
+  /**
+   * {{> waitCurrentPathEquals }}
+   */
+  async waitCurrentPathEquals(path, sec = null) {
+    const waitTimeout = sec ? sec * 1000 : this.options.waitForTimeout
+    const normalizedPath = normalizePath(path)
+
+    try {
+      await this.page.waitForFunction(
+        expectedPath => {
+          const actualPath = window.location.pathname
+          const normalizePath = p => (p === '' || p === '/' ? '/' : p.replace(/\/+/g, '/').replace(/\/$/, '') || '/')
+          return normalizePath(actualPath) === expectedPath
+        },
+        normalizedPath,
+        { timeout: waitTimeout },
+      )
+    } catch (e) {
+      const currentUrl = await this._getPageUrl()
+      const baseUrl = this.options.url || 'http://localhost'
+      const actualPath = new URL(currentUrl, baseUrl).pathname
+      if (/Timeout/i.test(e.message)) {
+        throw new Error(`expected path to be ${normalizedPath}, but found ${normalizePath(actualPath)}`)
       } else {
         throw e
       }
@@ -4092,9 +4168,15 @@ class Playwright extends Helper {
 
 export default Playwright
 
-function buildLocatorString(locator) {
+export function buildLocatorString(locator) {
   if (locator.isXPath()) {
-    return `xpath=${locator.value}`
+    // Make XPath relative so it works correctly within scoped contexts (e.g. within()).
+    // Playwright's XPath engine auto-converts "//..." to ".//..." when the root is not a Document,
+    // but only when the selector starts with "/". Locator methods like at() wrap XPath in
+    // parentheses (e.g. "(//...)[position()=1]"), bypassing that auto-conversion.
+    // We fix this by prepending "." before the first "//" that follows any leading parentheses.
+    const value = locator.value.replace(/^(\(*)\/\//, '$1.//')
+    return `xpath=${value}`
   }
   if (locator.isShadow()) {
     // Convert shadow locator to CSS with >> chaining operator
@@ -4335,34 +4417,45 @@ async function proceedIsChecked(assertType, option) {
   return truth(`checkable ${option}`, 'to be checked')[assertType](selected)
 }
 
-async function findFields(locator) {
+async function findFields(locator, context = null) {
+  let contextEl
+  if (context) {
+    const contextEls = await this._locate(context)
+    assertElementExists(contextEls, context, 'Context element')
+    contextEl = contextEls[0]
+  }
+
+  const locateFn = contextEl
+    ? loc => findElements.call(this, contextEl, loc)
+    : loc => this._locate(loc)
+
   // Handle role locators with text/exact options
   if (isRoleLocatorObject(locator)) {
-    const page = await this.page
-    const roleElements = await handleRoleLocator(page, locator)
+    const matcher = contextEl || (await this.page)
+    const roleElements = await handleRoleLocator(matcher, locator)
     if (roleElements) return roleElements
   }
 
   const matchedLocator = new Locator(locator)
   if (!matchedLocator.isFuzzy()) {
-    return this._locate(matchedLocator)
+    return locateFn(matchedLocator)
   }
   const literal = xpathLocator.literal(locator)
 
-  let els = await this._locate({ xpath: Locator.field.labelEquals(literal) })
+  let els = await locateFn({ xpath: Locator.field.labelEquals(literal) })
   if (els.length) {
     return els
   }
 
-  els = await this._locate({ xpath: Locator.field.labelContains(literal) })
+  els = await locateFn({ xpath: Locator.field.labelContains(literal) })
   if (els.length) {
     return els
   }
-  els = await this._locate({ xpath: Locator.field.byName(literal) })
+  els = await locateFn({ xpath: Locator.field.byName(literal) })
   if (els.length) {
     return els
   }
-  return this._locate({ css: locator })
+  return locateFn({ css: locator })
 }
 
 async function proceedSelect(context, el, option) {
@@ -4411,8 +4504,8 @@ async function proceedSelect(context, el, option) {
   return this._waitForAction()
 }
 
-async function proceedSeeInField(assertType, field, value) {
-  const els = await findFields.call(this, field)
+async function proceedSeeInField(assertType, field, value, context) {
+  const els = await findFields.call(this, field, context)
   assertElementExists(els, field, 'Field')
   const el = els[0]
   const tag = await el.evaluate(e => e.tagName)