javascript - Protractor 元素在该点不可点击

Question

我正在尝试使用 Protractor 登录 Google 帐户

google-account-spec.js

const loginPage = require('../pages/login-page');
const EC = ExpectedConditions;

describe('google accounts', function () {
it('should log in', async function () {
    try {
        browser.waitForAngularEnabled(false);
        browser.ignoreSynchronization = true;
        browser.get('https://accounts.google.com/signin/v2/identifier?flowName=GlifWebSignIn&flowEntry=ServiceLogin');
        //writing my email into an email input
        await loginPage.sendKeysEmailInput('email');
        //clicking on the next button for the email input
        loginPage.getEmailNextButton().click();
        await browser.wait(EC.presenceOf(loginPage.getPasswordInput()), 300000);
        let id = await loginPage.getPasswordInput().getAttribute('id');
        await browser.wait(EC.elementToBeClickable(element(by.name(id))), 300000);
        //writing my password into password input
        await element(by.name(id)).sendKeys('password');
        //waiting for the next button for the password input to become clickabe            
        await browser.wait(EC.elementToBeClickable(element(by.id('passwordNext'))), 5000);
        await browser.wait(EC.presenceOf(element(by.id('passwordNext'))), 5000);
        //trying to click on next button for the password input and getting an error
        await element(by.id('passwordNext')).click();
    } catch (expection) {
        console.error(expection);
    }
});
});

conf.js

exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
onPrepare : function() {
    // browser.manage().window().setSize(1600, 1000);
    browser.manage().window().maximize();
},
capabilities: {
    'browserName': 'chrome'
},
specs: ['specs/google-accounts-spec.js'],
jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 3000000,
}
};

login-page.js 我正在使用PageObject模式(login-page是一个页面对象)

var loginPage = function () {
var emailInput = element(by.id('identifierId'));
var passwordInput = element(by.id('password'));
var emailNextButton = element(by.id('identifierNext')).element(by.tagName('span'));


this.sendKeysEmailInput = async function(keys) {
    await emailInput.clear().sendKeys(keys);
};

this.getPasswordInput = function () {
    return passwordInput;
};

this.sendKeysPasswordInput = async function(keys) {
    await passwordInput.clear().sendKeys(keys);
};

this.getEmailNextButton = function(){
    return emailNextButton;
}
};

module.exports = new loginPage();

当我尝试单击下一步按钮输入密码时，出现错误

{ WebDriverError: unknown error: Element ... is not clickable at point (1100, 527). Other element would receive the click:

它说该元素不可点击，但之前在代码中我一直等待它变得可点击。所以我就是不明白，这个元素怎么不能点击。

我还尝试在conf.js的onPrepare中最大化窗口，但仍然遇到相同的错误。

奇怪的是，我并没有一直收到此错误，它就像 3 次尝试中的 1 次一样发生。我想这是因为我的网速很高。

我知道有一个简单的方法可以通过编写 browser.sleep() 来解决这个问题，但我认为有一个更好更快的解决方案，因为使用 browser.wait() 你可以等待比实际应该等待的时间更长的时间结果，我的程序会变得更慢。

Answer 1

由于您要单击的元素已换行，可能会发生这种情况。例如，您希望单击“input”，但必须单击其包装器“div”，并​​且在这种情况下可能会引发错误。要绕过此问题，您可以单击包装器或执行JS单击。

export async function jsClickButton(button: ElementFinder) {

    try {
        return await browser.executeScript('arguments[0].click()', button).then(async() => {
            console.log('Element has been clicked.');
        });
    } catch (error) {
        console.log('Element could not be clicked', error);
    }
}