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').CustomizedLogin

async 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 invoked

if (typeof options.additionalSteps !== 'undefined') {

    await options.additionalSteps({page, options})

  }