问题：
DART-聚合物单元测试。单击事件后无法引用dom元素
叶衡虑
Not able to reference dom elements.
expect(document.queryselector('qme-header').shadowroot.queryselector('#headererrordiv'),isNotNull)；总是失败，headererrordiv即使在div中也是null。
代码：
import 'package:test/test.dart';
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dart:async';
main() {
initPolymer().then((zone) => zone.run(() {
return Polymer.onReady.then((_) {
group('Header Form Elements Are Available', () {
test(("CheckSignInFormItems"), () {
expect(querySelector('qme-header').shadowRoot
.querySelector('#emailField'), isNotNull);
expect(querySelector('qme-header').shadowRoot
.querySelector('#passwordField'), isNotNull);
expect(querySelector('qme-header').shadowRoot
.querySelector('#signInButton'), isNotNull);
});
test(("CheckRegisterForgotItems"), () {
expect(querySelector('qme-header').shadowRoot
.querySelector('#registerButton'), isNotNull);
expect(querySelector('qme-header').shadowRoot
.querySelector('#forgotButton'), isNotNull);
});
});
group('Header Form Click Sign In Button', () {
test(("ClickSignInButton"), () {
(querySelector('qme-header').shadowRoot
.querySelector('#emailField') as InputElement).value = "";
(querySelector('qme-header').shadowRoot
.querySelector('#passwordField') as InputElement).value =
"";
Timer.run(expectAsync(() {
(querySelector('qme-header').shadowRoot
.querySelector('#signInButton') as ButtonElement).click();
expect(document.querySelector('qme-header').shadowRoot
.querySelector('#headerErrorDiv'), isNotNull);
}));
});
});
});
}));
}
Hi Günter，谢谢你的时间，我根据你的意见调整了我的代码，它应该可以工作，但我认为我是搞砸了我使用聚合物模板的方式。
environment:
sdk: '>=1.0.0 <2.0.0'
dependencies:
bootstrap: ^3.3.4
browser: '>=0.10.0 <0.11.0'
polymer: '>=0.16.0 <0.17.0'
test: '>=0.12.3'
transformers:
- polymer:
inline_stylesheets:
packages/bootstrap/css/bootstrap.css: false
packages/bootstrap/css/bootstrap-theme.css: false
entry_points:
- web/index.html
- test/qme_header_test.html
- test/pub_serve:
$include: test/**_test{.*,}.dart
<polymer-element name="qme-header">
<div class="container">
<div class="navbar-header"><a class="navbar-brand"
href="#"><span>QMe Application</span></a></div>
<template if="{{usingHeaderForm}}">
<div id="navbar" class="navbar-collapse collapse" >
<form on-submit="{{validateSignInForm}}"
class="navbar-form navbar-right">
<div class="form-group">
<input type="text" id="emailField"
value="{{qmeSignIn.userEmail}}" placeholder="Email"
class="form-control">
</div>
<div class="form-group">
<input type="password" id="passwordField"
value="{{qmeSignIn.userPassword}}"
placeholder="Password" class="form-control">
</div>
<button id="signInButton" type="submit"
class="btn btn-success btn-sm">Sign in</button>
<button id="registerButton" class="btn btn-
info btn-xs" type="button-small">Register</button>
<button id="forgotButton" class="btn btn-info
btn-xs" type="button-small">Forgot Password</button>
</form>
</div>
</template>
<template if="{{!usingHeaderForm}}">
<p>Hello login complete</p>
</template>
library qme_header;
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:qme/views/qme_error.dart';
@CustomTag('qme-header')
class QmeHeader extends PolymerElement {
@published QMeSignIn qmeSignIn;
@observable bool usingHeaderForm = true;
@observable QmeErrorHolder qmeErrorHolder;
QmeHeader.created() : super.created() {
qmeSignIn = new QMeSignIn();
qmeErrorHolder = QmeErrorHolder.instance;
}
toggleFormDisplay() {
usingHeaderForm = !usingHeaderForm;
}
performLogin() {
toggleFormDisplay();
}
bool validateSignInEmail() {
if (qmeSignIn.userEmail.length == 0) {
qmeErrorHolder.headerErrorMessage = "Valid user email
required";
return false;
}
qmeErrorHolder.headerErrorMessage = '';
return true;
}
bool validateSignInPassword() {
if (qmeSignIn.userPassword.length == 0) {
qmeErrorHolder.headerErrorMessage = "Valid user password
required";
return false;
}
qmeErrorHolder.headerErrorMessage = '';
return true;
}
validateSignInForm(Event event, Object detail, Node sender) {
event.preventDefault();
if (validateSignInEmail() && validateSignInPassword()) {
print("Submit");
performLogin();
qmeErrorHolder.headerError = false;
} else {
qmeErrorHolder.headerError = true;
}
}
}
class QMeSignIn extends Observable {
@observable String userEmail;
@observable String userPassword;
QMeSignIn([this.userEmail = "", this.userPassword = ""]);
}
<polymer-element name="qme-error">
<template>
<template if="{{qmeErrorHolder.headerError}}">
<div class="container">
<div id="headerErrorDiv" class="alert alert-danger"
role="alert">{{qmeErrorHolder.headerErrorMessage}}</div>
</div>
</template>
</template>
<script type="application/dart" src="qme_error.dart">
</script>
</polymer-element>
library qme_error;
import 'package:polymer/polymer.dart';
@CustomTag('qme-error')
class QmeError extends PolymerElement {
@observable QmeErrorHolder qmeErrorHolder;
QmeError.created() : super.created() {
qmeErrorHolder = QmeErrorHolder.instance;
}
}
class QmeErrorHolder extends Observable {
@observable bool headerError;
@observable String headerErrorMessage;
static final QmeErrorHolder _instance = new
QmeErrorHolder._internal();
static QmeErrorHolder get instance => _instance;
QmeErrorHolder._internal();
}
<html>
<head>
<link rel="import"
href="../packages/polymer/polymer.html">
<link rel="import"
href="../packages/qme/views/qme_header.html" >
<link rel="import"
href="../packages/qme/views/qme_error.html" >
<link rel="stylesheet"
href="packages/bootstrap/css/bootstrap.css">
<link rel="stylesheet"
href="packages/bootstrap/css/bootstrap-theme.css">
<script type="application/dart"
src="qme_header_test.dart"></script>
<script data-pub-inline src="packages/test/dart.js">
</script>
</head>
<body>
<qme-header></qme-header>
<qme-error></qme-error>
</body>
</html>
@whenPolymerReady
void runTests() {
group('Header Form Click Sign In Button', () {
test(("ClickSignInButton"), () {
(querySelector('qme-header::shadow #emailField ') as
InputElement).value ="";
(querySelector(
'qme-header::shadow #passwordField') as
InputElement).value = "";
(querySelector('qme-header::shadow #signInButton') as
ButtonElement)
.click();
expect(
document.querySelector('qme-error::shadow #headerErrorDiv'), isNotNull);
});
});
}
<html>
<head>
<link rel="stylesheet"
href="packages/bootstrap/css/bootstrap.css">
<link rel="stylesheet"
href="packages/bootstrap/css/bootstrap-theme.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="import"
href="packages/qme/views/qme_header.html">
<link rel="import"
href="packages/qme/views/qme_error.html">
</head>
<body>
<qme-header></qme-header>
<qme-error></qme-error>
<script src="packages/bootstrap/jquery/jquery.js"></script>
<script src="packages/bootstrap/js/bootstrap.js"></script>
<script data-pub-inline src="packages/browser/dart.js">
</script>
<script type="application/dart">export
'package:polymer/init.dart';</script>
</body>
</html>
共有1个答案
双浩涆
首先，我认为应该在main()中添加@Whenpolymerready注释，而不是聚合物初始化代码。
而不是
expect(document.querySelector('qme-header').shadowRoot
.querySelector('#headerErrorDiv'), isNotNull);
你可以用
expect(document.querySelector('qme-header::shadow #headerErrorDiv'), isNotNull);
类似资料：
-
主要内容：分组测试用例单元测试涉及测试应用程序的每个单元。它可以帮助开发人员在不运行整个复杂应用程序的情况下测试小功能。 名为“test”的Dart外部库提供了编写和运行单元测试的标准方法。 Dart单元测试涉及以下步骤 - 第1步：安装 test 包 要在当前项目中安装第三方软件包，需要文件。要安装 text 包，首先在文件中进行以下输入 - 输入后，右键单击文件并获取依赖项。它将安装 包。下面给出了WebStorm
-
使用此答案中的代码解决单击组件外部的问题： 我不知道如何对不愉快的路径进行单元测试，以使警报不运行，目前为止我得到了什么： 我尝试过： 通过
-
在我们的应用程序中，当我将鼠标放在菜单项上时，将出现下拉菜单项。在这里我想通过点击它来选择一个项目。主菜单：管理子菜单：管理频道，管理用户在selenium webdriver中，我尝试通过给出xpath,linktext,partial link文本直接点击管理频道。
-
我们已经更新到最新的Selenium版本3.141.59并且发现点击不起作用。我没有得到一个错误消息，表明单击失败，并移动到下一个函数或行。我已经验证了它在Chrome、Firefox和Edge上不起作用。我们的代码是用Java编写的。 在单击元素之前添加等待时间 操作 JavaScriptExecutor 如有任何帮助，我们将不胜感激！
-
im 尝试单击此 div 元素，但引发异常。我的代码是： selenium.common.exceptions.NoSuchElementException：消息：没有这样的元素：无法定位元素：{"method"："xpath"，"selector":"//*[@id='ext-gen1147']"}（会话信息： chrome=80.0.3987.163）
-
单元测试涉及测试软件应用程序的每个单元或单个组件。这是第一级软件测试。单元测试的目的是验证单元组件的性能。 单元是软件系统的单个可测试部分，并在应用程序软件的开发阶段进行测试。 此测试旨在测试隔离代码的正确性。单元组件是应用程序的单独功能或代码。白盒测试方法用于单元测试，通常由开发人员完成。 在测试级别层次结构中，单元测试是在集成和其他剩余测试级别之前完成的第一级测试。它使用模块进行测试，减少了等