angularjs 应用程序使用 behat 的 xpath 问题

Question

我一直在尝试为我工作的公司制作一个网络爬虫，使用 behat 结合 mink 扩展。我过去也做过类似的事情，但不同的是，现在我试图抓取的页面是在 angularjs.

中构建的

这似乎导致我的 xpath 选择器出现问题，无法在 DOM.

中找到我请求的元素

为了确保我有正确的 xpath 并仔细检查它，我还使用了 chrome（扩展名）中的 Xpath Helper。

我尝试使用的功能是：

/**
 * @Then I login
 */
public function login()
{
    $page = $this->getSession()->getPage();

    $username = $page->find('xpath', "//*[@id='inputEmail']/self::INPUT");
    $password = $page->find('xpath', "//*[@id='inputPassword']/self::INPUT");

    if ($username == null && $password == null) {
       echo "nothing found";
    }
    else{
        $username->setValue('username');
        $password->setValue('password');
    }
}

在我的 .feature 文件中，我可以访问登录页面并通过 "seeing" dom 中的一些文本来验证我是否在那里，以验证它是否正常工作，但是当我尝试在上面的字段中填写值，但出现错误。

我猜这是一个 angular 问题，它创建 DOM 元素的方式导致我的 xpath 无法找到我需要的字段，但我想不出解决方法这个。

当然，使用像 Protractor 这样的 JS 框架可能是一个解决方案，但我想留在 php，因为它更容易由我工作的团队维护。

欢迎任何想法。

Answer 1

一些想法：

使用页面对象清理代码
通过等待确保元素在使用前存在（find() 可以 return null 或元素）
如果不需要UI使用 guzzle 或使用一些无头驱动程序
如果您正在使用 UI

angularjs 应用程序使用 behat 的 xpath 问题

xpath issue using behat for angularjs application

php

xpath

behat

mink