Javascript 在发送一些输入后，如何获取输入框的文本值？

我在文本框中输入了一些电子邮件，并试图获取文本框的值（假定为电子邮件地址），但收到的却是：ClientFunctionResultPromise{{U then:[]，[U fn:[函数]，\U taskPromise:null}我试图记录输出，因为本质上我想创建一个断言，检查输入框是否已填充

mainfile.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>

导出默认类登录名{
构造函数（）{
this.receiptEmail=选择器（“输入[copy='Recipient email']”）；
}
异步电子邮件（电子邮件）{
等待t.typeText（此接收电子邮件，电子邮件）；
console.log（this.receiptEmail.innerText）；//我也尝试了textContent和value，但仍然收到了相同的日志
}
}
收件人电子邮件*

---

有人愿意解释一下吗？

表单元素需要一个name属性，以便在提交表单时传递它们的值。使用

name

或

id

属性是选择正确表单字段进行测试的自然方式

对于输入字段，例如：

<input id="email" name="email_address" />

更新：

表单字段的

标签

标记是为

收件人电子邮件

指定的，这应与表单输入字段的

id

属性的值相对应。表单输入标记没有

id

属性，添加该属性可以简化选择器

该字段还有一个硬编码的

值

属性，在向字段添加内容之前需要清除该属性。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>

mainfile.js:确保为测试夹具的目标页面设置正确的URL，如果不是标准端口，请记住包括端口号，例如

因此，在回答您的问题时，如果您的

选择器

有效，它将返回一个承诺，您可以解析该承诺以获取HTML字段，这将允许您访问其

值

属性

---

TestCafe使您可以显式地使用Promissions和async/await来管理测试的执行。

嘿，Dan，我更新了代码。基本上，我从fixture中获取输入（也称为电子邮件地址），并将其传递到另一个文件（称为login.js）中的登录函数中。您可以编辑您的问题以包含表单的HTML吗？我可以更新我的答案，当我确切地知道我们在表格中处理的是什么时。嗨，Akeem，我已经更新了我的答案，以便尽可能详细地为您提供答案。

<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>

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);
  }
}

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');

});