我在文本框中输入了一些电子邮件,我试图获取文本框的值(假设是电子邮件地址),但我收到:ClientFunctionResultPromise { _then: [], _fn: [Function], _taskPromise: null } 我正在尝试记录输出,因为本质上我想创建一个断言来检查输入框是否已填充。
主文件.js
import login from '../pages/login’;
import { Selector } from 'testcafe';
const logs = new login();
fixture `A Simple Example`
.page `http://localhost/simple-example`;
test(‘Check email`', async t => {
logs.enterEmail(”yager@micheal.com");
});
Login.js 文件 :
export default class Login {
constructor() {
this.receiptEmail = Selector("input[copy='Recipient email']");
}
async enterEmail(email){
await t.typeText(this.receiptEmail,email);
console.log(this.receiptEmail.innerText); // I also tried textContent and value and still received the same log
}
}
<div class="CustomerInfo__fields__field"><label for="recipient-email" class="CustomerInfo__fields__field__label" style="visibility: visible;">Recipient email*</label><input copy="Recipient email" field="email" section="recipient" maxlength="200" class="CustomerInfo__fields__field__input recipient-email " required="" name="email" placeholder="" type="email" value="yager@micheal.com"></div>
有人可以解释一下吗?
最佳答案
表单元素需要一个 name 属性才能在提交表单时传递它们的值。使用 name
或 id
属性是选择正确的表单域进行测试的自然方式。
对于输入字段,例如:
<input id="email" name="email_address" />
可以使用
#email
或 input[name="email_address"]
作为选择器字符串。示例测试用例:
import { Selector, t } from 'testcafe';
fixture `A Simple Example`
.page `http://localhost/simple-example`;
test('Email Input Test', async t => {
const emailInput = Selector('input[name="email_address"]');
const emailAddress = 'john.smith@domain.com';
await t
.typeText(emailInput, emailAddress)
.expect(emailInput.value).eql(emailAddress);
});
更新:
label
为 recipient-email
指定表单字段的标签,这应该对应于 id
的值表单输入字段的属性。您的表单输入标签没有 id
属性,添加属性简化了选择器。您还有一个硬编码
value
字段的属性,在向字段添加内容之前需要清除它。 TestCafe API 不会直接将字段值设置为字符串,而是模拟用户键入提供的文本。因此,如果输入没有被自动清除,例如在单击它之后,您需要模拟用户删除文本的操作。<div class="CustomerInfo__fields__field">
<label for="recipient-email"
class="CustomerInfo__fields__field__label"
style="visibility: visible;">Recipient email*</label>
<input id="recipient-email"
copy="Recipient email" field="email" section="recipient" maxlength="200"
class="CustomerInfo__fields__field__input recipient-email " required=""
name="email" placeholder="" type="email" value="yager@micheal.com" />
</div>
login.js: 记得导入
t
以便 TestCafe 可以发挥其魔力并提供正确的测试 Controller 。import { Selector, t } from 'testcafe';
export default class Login {
constructor () {
// Use standard CSS selectors to locate elements
// This selector targets the HTML element with id="recipient-email"
this.receiptEmail = Selector('#recipient-email');
}
async enterEmail(email) {
// Simulate the clearing of the field first
await t
.click(this.receiptEmail)
.pressKey('ctrl+a delete')
.typeText(this.receiptEmail, email);
// Resolve the Selector promise to get the field
// and console.log the value property
console.log('receiptEmail: ' + await this.receiptEmail.value);
}
}
主文件.js:确保为测试夹具的目标页面设置正确的 URL,如果它不是标准端口,请记住包含端口号,例如http://localhost:3000/ .
import { Selector } from 'testcafe';
import login from '../pages/login';
const logs = new login();
// Change the page URL string
// It specifies the target URL to load for the test fixture
fixture `A Simple Example`
.page `http://localhost/simple-example`;
test('Check email', async t => {
// You must use 'await'
await logs.enterEmail('user@unknown.com');
});
因此,在回答您的问题时,如果您的
Selector
有效,它将返回一个 Promise,您可以解析它以获取 HTML 字段,这将使您可以访问它的 value
属性(property)。TestCafe 让你明确地使用 Promise 和 async/await 来管理测试的执行。
关于javascript - 发送一些输入后如何获取输入框的文本值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50322044/