Ionic应用中ion-button点击触发失败问题排查与解决

页面上的「CREATE ACCOUNT」ion-button被遮挡，用Cypress测试时，不添加{force: true}参数点击会报错，添加后测试显示通过，但实际没触发按钮的点击逻辑，手动点击则完全正常。

我尝试了以下几种Cypress命令：

cy.get('button[type="submit"]').click({force: true});
cy.get('#btn-register-submit', {includeShadowDom: true}).trigger("click", {force: true});
cy.get('#btn-register-submit').trigger('mouseover').click();
cy.get('#btn-register-submit').trigger('mouseover', {force: true}).click({force: true});
cy.get('#btn-register-submit', {includeShadowDom: true}).click({force: true});
cy.get('#btn-back').click({force: true});

有意思的是，cy.get('#btn-back').click({force: true});能成功触发返回按钮的点击逻辑——即使不加force参数时它也会报同样的遮挡错误，但加了force就正常生效。

最新更新 #

我找到了解决方法：需要同时填写ion-input元素和其shadow DOM内的input元素，代码如下：

cy.visit('/login');
cy.get('#btn-create-account').click()
cy.get('.tenant-card').contains('NZ Speeder Club').first().click()
cy.get('#select').click()
cy.get('#btn-submit').should('exist')
cy.get('input[name="input-email"]').eq(0).click({force: true}).type(`${name}${emailDomain}`, {force: true})
cy.get('input[name="input-email"]').eq(1).click().type(`${name}${emailDomain}`)
cy.get('input[name="input-first-name"]').eq(0).click({force: true}).type(`${name}`, {force: true})
cy.get('input[name="input-first-name"]').eq(1).click().type(`${name}`)
cy.get('input[name="input-last-name"]').eq(0).click({force: true}).type(`${name}`, {force: true})
cy.get('input[name="input-last-name"]').eq(1).click().type(`${name}`)
cy.get('input[name="input-password"]').eq(0).click({force: true}).type(password, {force: true})
cy.get('input[name="input-password"]').eq(1).click().type(password)
cy.get('input[name="passwordConfirm"]').eq(0).click({force: true}).type(password, {force: true})
cy.get('input[name="passwordConfirm"]').eq(1).click().type(password)
// cy.get('input[name="input-phone"]').eq(1).type('Phone') 
cy.get('#btn-submit').click({force: true})

更新 #

现在按钮点击已经生效，但Angular表单始终处于无效状态。我尝试给输入元素添加.click().focus()操作，但没有效果，手动操作表单时完全正常，问题应该和Cypress的模拟输入有关。

渲染后的HTML说明 #

• 截图1：展示ion-input组件的DOM结构，可见组件内部包含shadow DOM包裹的原生input元素
• 截图2：显示表单输入框的层级关系，明确ion-input与内部shadow input的对应结构

当前Cypress测试代码 #

it('Create account', () => {
    const prefix = TodaysDatePrefix();
    const suffix = RandomAlphaSuffix();
    const name = prefix + suffix;
    const emailDomain = '@wekasolutions.co.nz'; 
    const password = 'wekaT3st'

    cy.visit('/login');
    cy.get('#btn-create-account').click()
    cy.get('.tenant-card').contains('NZ Speeder Club').first().click()
    cy.get('#select').click()
    // cy.get('#btn-register-submit').should('exist')
    cy.get('input[name="input-email"]').eq(1).click().focus()
    cy.get('input[name="input-email"]').eq(1).type(`${name}${emailDomain}`)
    cy.get('input[name="input-first-name"]').eq(0).click().focus()
    cy.get('input[name="input-first-name"]').eq(0).type(`${name}`)
    cy.get('input[name="input-last-name"]').eq(1).click().focus()
    cy.get('input[name="input-last-name"]').eq(1).type(`${name}`)
    // cy.get('input[name="input-phone"]').eq(1).type('Phone') 
    cy.get('input[name="input-password"]').eq(1).click().focus()
    cy.get('input[name="input-password"]').eq(1).type(password)
    cy.get('input[name="passwordConfirm"]').eq(1).click().focus()
    cy.get('input[name="passwordConfirm"]').eq(1).type(password)
    // cy.get('button[type="submit"]').click({force: true});
    // cy.get('#btn-register-submit', {includeShadowDom: true}).trigger("click", {force: true});
    // cy.get('#btn-register-submit').trigger('mouseover').click();
    // cy.get('#btn-register-submit').trigger('mouseover', {force: true}).click({force: true});
    // cy.get('#btn-register-submit', {includeShadowDom: true}).click({force: true});
    cy.get('#btn-test').click({force: true})
    cy.get('#btn-submit').click({force: true})
})

内容的提问来源于stack exchange，提问作者MadMac