在发送一些输入后,如何获取输入框的文本值?

时间:2018-05-14 01:17:09

标签: javascript node.js

我正在将一些电子邮件输入到文本框中,我正在尝试获取文本框的值(假设是电子邮件地址),而是收到: ClientFunctionResultPromise {_then:[], _fn:[Function],_ 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>

有人可以解释吗?

1 个答案:

答案 0 :(得分:1)

表单元素需要name属性才能在提交表单时传递其值。使用nameid属性是选择正确的表单字段进行测试的自然方式。

对于输入字段,例如:

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

可以使用#emailinput[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可以发挥其魔力并提供合适的测试控制器。

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

mainfile.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有效,它将返回您可以解析以获取HTML字段的承诺,这将允许您访问其value属性。

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