JS：传递一个包含函数/方法属性的对象，然后在另一个文件中传递并调用传入的对象函数/方法属性？

Question

我正在努力为登录功能添加额外的检查。如果传递给函数的对象包含属性名称additionalSteps，它将调用additionalSteps 属性。但是，每当我到达调用步骤时，都会收到一条错误消息，指出该属性不是函数或未定义。options.additionalSteps（取决于我如何通过调用对象 property( ) 或将局部变量分配给对象 property( )来调整代码let additionalSteps。）

我想知道是否可以传递一个具有定义函数/方法的属性的对象，然后将该对象传递到导入类（或使用）的函数中，该函数将检查属性名称是否存在，然后调用该对象的require函数如果条件为真。我可以让其他文件定义并处理该函数，但我希望用户按照他们的意愿定义属性函数。

根据我对该主题的研究，我对属性的感觉是不可能通过对象内的另一个文件传递函数/方法。（有关具有函数的对象属性的所有信息和示例似乎暗示这不受支持。）

测试代码：

async function fewMoreSteps({page, options} = {}) {

  console.log('This is the addtional step...')

  await page.waitForSelector('#header_notification_link', {visible: true})

  await page.click('#header_notification_link')

}

describe('Test Login', () => {

  // eslint-disable-next-line jest/no-focused-tests

  it.only('Login with custom function', () => {

    const username = Cypress.env('steamUserName')

    const password = Cypress.env('steamUserNamePW')

    const loginUrl = Cypress.env('loginUrl')

    const loginSelector = Cypress.env('loginSelector')

    const cookieName = Cypress.env('cookieName')

    const socialLoginOptions = {

      username,

      password,

      loginUrl,

      // Add username/pw fields and buttons and addtional steps

      usernameField: '#input_username',

      passwordField: '#input_password',

      passwordSubmitBtn: '#login_btn_signin',

      // make this a global passed function

      additionalSteps: async function({page, options} = {}) {

        /*console.log('This is the addtional step...')

        await page.waitForSelector('#header_notification_link', {visible: true})

        await page.click('#header_notification_link') */ 

        await fewMoreSteps({page, options})

      },

      isPopup: true,

      popupDelay: 6000,

      logs: true,

      headless: false,

      loginSelector: loginSelector,

      postLoginClick: '#account_pulldown',

      postLoginSelector: '#account_dropdown div.popup_menu a.popup_menu_item:first-of-type'

    }

  })

}

Answer 1

解决了我的问题。问题来自测试文件。具有函数属性的对象似乎不太适合cy.task(). （可能在尝试引用 addtionalSteps 函数时遇到了麻烦。需要研究我的最初尝试是否可以在 Cypress 中进行。）相反，我在 Cypress 插件索引文件中添加了additionStep 检查。赛普拉斯插件：const {customizedLogin} = require('../../src/Plugins').CustomizedLoginasync function fewMoreSteps({page, options} = {}) {  console.log('This is the addtional step...')  await page.waitForSelector('#header_notification_link', {visible: true, timeout: 6000})  await page.click('#header_notification_link')}module.exports = (on, config) => {  // `on` is used to hook into various events Cypress emits  // `config` is the resolved Cypress config  on('task', {    customizedLogin: (options) => {      if (options.moreSteps) {        options.additionalSteps = fewMoreSteps      }      return CustomizedLogin(options)    }  }  )}现在，我不需要为 CustomizedLogin 函数添加额外的变量，并且在调用 addtionalSteps 时（预计有检查条件）。module.exports.CustomizedLogin = async function CustomizedLogin(options = {}) {  if (options.usernameField && options.passwordField) {    const typeUsername = async function({page, options} = {}) {      await page.waitForSelector(options.usernameField, {visible: true})      await page.type(options.usernameField, options.username)      if (options.usernameSubmitBtn) {        await page.click(options.usernameSubmitBtn)      }    }    const typePassword = async function({page, options} = {}) {      await page.waitForSelector(options.passwordField, {visible: true})      await page.type(options.passwordField, options.password)      if (options.passwordSubmitBtn) {        await page.click(options.passwordSubmitBtn)      }    }    const postLogin = async function ({page, options} = {}) {      await page.waitForSelector(options.postLoginClick)      await page.click(options.postLoginClick)    }    return baseLoginConnect(typeUsername, typePassword, null, null, postLogin, options)  } else {    throw new Error('Please review your option properties. Propeties usernameField and passwordField are required as type String.')  }}// When options.addtionalSteps is invokedif (typeof options.additionalSteps !== 'undefined') {    await options.additionalSteps({page, options})  }