Atata selenium Web 驱动程序在 Angular 应用程序上找不到按 id 的控件答案

【问题标题】：Atata selenium web driver can't find controls by id on angular appAtata selenium Web 驱动程序在 Angular 应用程序上找不到按 id 的控件
【发布时间】：2018-11-22 21:46:07
【问题描述】：

我一直在努力在一个使用 atata 作为框架的 Angular (5) 应用程序上设置一个简单的自动化测试，该框架简单地包装了 selenium Web 驱动程序来进行测试。对于我的生活，我无法在登录页面中找到我需要的元素。我尝试通过 xpath、css、id 和名称查找。这些都不起作用。如果我做错了什么，请有人帮助我理解？

我已确保我尝试管理的控件的 id 已就位，并且在我检查元素时它们会显示。有什么我应该做的，以便 webdriver 访问 dom 而不是网站的 html 源（因为它是一个水疗中心，所以有区别）？我也尝试过等待 10 秒，然后再继续搜索控件。

所有包的版本都是最新的。

AtataSettings.cs

using Atata;

[assembly: Culture("en-us")]
[assembly: VerifyTitleSettings(Format = "Login")]

SignInPage.cs

using Atata;

namespace PortalTests2
{
    using _ = SignInPage;

    [Url("auth/login")]
    [VerifyTitle]
    public class SignInPage : Page<_>
    {
        [FindById("email")]
        public TextInput<_> Email { get; set; }

        [FindById("password")]
        public TextInput<_> Password { get; set; }

        [FindById("login_button")]
        public Button<_> SignIn { get; set; }

        [FindById]
        public Select<_> selectedClientId { get; set; }

        [FindById("continue_button")]
        public Button<_> ContinueButton { get; set; }
    }
}

SignInTests.cs

using Atata;
using NUnit.Framework;

namespace PortalTests2
{
    [TestFixture]
    public class SignInTests
    {
        [SetUp]
        public void SetUp()
        {
            AtataContext.Configure().
                UseChrome().
                WithFixOfCommandExecutionDelay().
                WithLocalDriverPath().
                UseBaseUrl($"http://localhost:4300/").
                UseNUnitTestName().
                AddNUnitTestContextLogging().
                AddScreenshotFileSaving().
                LogNUnitError().
                TakeScreenshotOnNUnitError().
                Build();
        }

        [TearDown]
        public void TearDown()
        {
            AtataContext.Current?.CleanUp();
        }

        [Test]
        public void SignIn()
        {
            Go.To<SignInPage>().
                Email.Set("root").
                Password.Set("r00t").
                SignIn.Click();
        }
    }
}

编辑：

如果我使用普通的硒设置，我设法让它找到元素，如下所示。为什么这行得通，但 Atata 的包装却不行？

using (var driver = new ChromeDriver(Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location)))
            {
                driver.Navigate().GoToUrl(@"http://localhost:4300/");
                var link = driver.FindElement(By.Id("email"));
                link.SendKeys("hello");
            }

编辑 2：

我发现有人遇到类似问题，但仅限于文件输入字段。有人可以确认我正在使用的设置是否存在挥之不去的错误吗？

https://github.com/atata-framework/atata/issues/188

编辑 3：

邮件字段输入控件的html sn-p：

<input autocomplete="off" class="form-control ng-pristine ng-valid ng-touched" id="email" name="email" placeholder="Email address" type="email" ng-reflect-name="email" ng-reflect-is-disabled="false" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;" xpath="1">

【问题讨论】：

您是否通过右键单击并检查 id 是否符合您的预期在浏览器中查看了页面源代码。
是的，页面源只显示了非常有限的文档，而检查一个元素会显示具有所有控件和 id 的完整 dom，如预期的那样。这就是为什么我问我是否应该做一些不同的事情以便 webdriver 看到 dom 而不是当你右键单击并说“显示源”时看到的源。
我从来没有使用过atata，但是只要您为您正在测试的浏览器安装并引用了正确的驱动程序，我就没有遇到过这个问题。硒是一种非常稳定的产品。现在删除atata并直接与Selenium一起工作只是为了证明一点会不会太过分了。如果它有效，那么您就会知道问题出在 Atata 上
我试了一下并在上面编辑了我的问题。我想你不会知道为什么它可以与普通的 webdriver 设置和 atata 的设置一起使用，对吧？
恐怕不行。但至少你知道要专注于 Atata 产品

标签： c# angular selenium .net-core atata

【解决方案1】：

问题在于控件使用错误。 Atata 具有独特的ControlDefinition 功能，它指定控件元素的基本 XPath。它通过过滤掉错误的元素使元素搜索更加准确。对于TextInput<TOwner>，它是[ControlDefinition("input[@type='text' or not(@type)]")]。

您的电子邮件元素是 <input type="email">，它与 TextInput<TOwner> 的基本 XPath 不匹配。密码控制也应该如此。

只需将控件类型更改为EmailInput<TOwner> 和PasswordInput<TOwner>：

public class SignInPage : Page<_>
{
    [FindById("email")]
    public EmailInput<_> Email { get; set; }

    [FindById("password")]
    public PasswordInput<_> Password { get; set; }

    //...
}

这里是输入控件文档的链接：https://atata-framework.github.io/components/#inputs

作为一个选项，您还可以将两种控件类型更改为Input<string, TOwner>。它也可以作为Input 对ControlDefinition 不那么严格。

顺便说一句，如果您需要覆盖一些默认的ControlDefinition 以实现全局的特定控制：

[assembly: ControlDefinition("input", ComponentTypeName = "text input", TargetType = typeof(TextInput<>))]

或者甚至将"*" 放入匹配任何元素。

[assembly: ControlDefinition("*", ComponentTypeName = "text input", TargetType = typeof(TextInput<>))]

【讨论】：