protractor e2e 测试元素不可交互

Question

在尝试使用 protractor 为 angular 应用程序设置 e2e 测试时，我遇到了这个问题，即来自 protractor 的 sendKeys() 方法无法正常工作。 我的测试还不包含太多逻辑，因为只能单击元素。 之后每次交互都会抛出错误“失败：元素不可交互”。 到目前为止我已经尝试过了。

我设置了一个 login-page.po.ts 文件，其中包含在我的 e2e 规范文件中返回我需要的元素的函数。

// 登录页面.po.ts

    import { browser, by, element } from 'protractor';
    
    export class LoginPage {
      navigateTo() {
        return browser.get('/login');
      }
    
      getEmailField() {
        return element(by.css('.email'));
      }
    
      getPasswordField() {
        return element(by.css('.password'));
      }
    
      getCookieConsentButton() {
        return element(by.css('.cookieButton'));
      }
    
    }

// 登录页面-e2e-spec.ts

import { browser, protractor } from 'protractor';
import { LoginPage } from './login-page.po';

describe('Login tests', () => {
  let page: LoginPage; beforeEach(() => {
    page = new LoginPage();
    page.navigateTo();
    browser.waitForAngularEnabled(false);
  });

  it('route to register page', async () => {
    const EC = protractor.ExpectedConditions;

    browser.wait(EC.visibilityOf(cookieButton), 20000).then(async function () {
      page.getCookieConsentButton().click().then(async function () {
        page.getEmailField().click();
        browser.sleep(5000);
        await getEmailField.sendKeys('12222');
      });
    });

  });

});

我也尝试过没有像这样的 then 和 async 块：

page.getCookieConsentButton().click();
browser.sleep(5000);
page.getEmailField().click();
page.getEmailField().sendKeys('email@email.com');

但它不断抛出相同的错误。 我卡在了这一点上，我无法在不使发送密钥功能正常工作的情况下继续测试更多应用程序。 不幸的是，我似乎在寻找鬼魂。

我也尝试使用 protractor 的 presenceOf 功能等待元素出现但没有成功。

const EC = protractor.ExpectedConditions;
await browser.wait(EC.presenceOf(page.getCookieConsentButton()));
page.getCookieConsentButton().click();
await browser.wait(EC.presenceOf(page.getEmailField())).then(function () {
page.getEmailField().sendKeys('email@email.com');
});

这是我的 protractor 配置，主要是默认配置

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome',
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function () { }
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayErrorMessages: true } }));
  }
};

非常感谢任何提示或提示。

Answer 1

是的，Protractor 将在 2022 年底结束开发。Cypress 似乎是个好东西。 但是，我认为你现在应该尝试更新它

beforeEach(() => {
    page = new LoginPage();
    page.navigateTo();
    browser.waitForAngularEnabled(false);
  });

到

beforeEach(() => {
    browser.waitForAngularEnabled(false);
    page = new LoginPage();
    page.navigateTo();
  });

或者您也可以尝试使用browser.waitForAngularEnabled(false); 在 protractor 配置文件的onPrepare()方法中。