在量角器中填写表格的更有效方法? [英] More efficient way to fill out my form in protractor?

问题描述

我有一个 e2e 测试，用于在我的应用程序的表单中填写数据.我想让代码更高效，并想知道它是否值得.基本上，我目前的代码将键发送到所有必填字段，然后单击保存按钮.从那里我检查数据是否正确显示以及是否显示成功消息.保存表单后的测试不是我需要提高效率的.这是填写表格的过程.所以我很好奇是否有人可以提供任何有关这样做的更实用方法的见解.我有点困惑，因为量角器使用承诺，所以为我的表单做一个循环不会真正起作用，因为元素不可见.此外，我有一个电子邮件验证和下拉菜单，因此循环执行并不能很好地工作，因为有些字段需要特定格式.我正在考虑创建一个填写整个表单的函数，然后在我的测试中调用该函数，以便我的测试更有效率.我只是不确定这样做是否值得.任何建议都会很棒.我应该保留代码原样吗?这是我填写表单的代码示例.谢谢！

I have an e2e test that fills out data in a form for my application. I would like to make the code more efficient and was wondering if it is worth it or not. Basically, my code at the moment sends keys to all the required fields, then clicks a save button. From there I check if the data is displayed correctly and that a success message displays. The tests after the form being saved are not what I need to make more efficient. It is the process of filling out the form. So I was curious if anybody could provide any insight on a more practical way in doing so. I am a little confused, as protractor uses promises, so doing a loop for my form would not really work as the elements would not be visible. Also, I have an email validation and drop down menus, so doing a loop would not really work well, as there are fields that require specific format. I was thinking about creating a function that fills out the entire form, then just calling the function in my tests so that my test is more efficient. I am just unsure if it is worth it to do so. Any advice would be great. Should I just leave the code the way it is? Here is an example of the code where I fill out the form. Thank you!

  page.getNameInput().sendKeys('test');
  browser.sleep(1000);
  page.getLastNameField().sendKeys('testLast');
  browser.sleep(1000);
  page.getEmailField().sendKeys('test@test')

  //these are drop down menus
  page.getProgramField().sendKeys(Key.RETURN);
  page.getProgramField().sendKeys(Key.RETURN);
//2nd drop down
  page.getFileField().sendKeys(Key.RETURN);
  page.getFileField().sendKeys(Key.RETURN);
})

推荐答案

所以一般来说，使用 browser.sleep() 是非常糟糕的，因为您实际上无法知道操作完成的确切时间.这就是他们发明承诺的原因.

So in general it's very bad to use browser.sleep() since you actually cannot know the exact time an operation finishes. That's why they invented promises.

在您的特定情况下，一种选择是创建一个名为 async fillInput(element, text) 的函数.该函数负责将数据填充到使用 element(by.css('SOME_CSS_RULE')) 创建的 ElementFinder 对象中.

In your particular case one option would be to create a function called async fillInput(element, text). This function is responsible for filling data into an ElementFinder object which is created using element(by.css('SOME_CSS_RULE')).

export async function fillInput(el, text) {
  await el.click()
  await el.clear();
  await el.sendKeys(text);
}

在函数中可以看到await的用法.它实际上等待解决承诺并解开它的价值.这消除了无休止的嵌套 promises 的痛苦.await 在每个异步函数中都可用.一个函数是异步的，因为你在它之前加上了 async 这个词.在这种情况下，fillInput() 返回一个 Promise 对象，因为每个 async 函数都返回一个 Promise.

In the function you can see the usage of await. It actually waits for resolving of a promise and unwraps it's value. That removes the pain of endless nested promises.await is available WITHIN EVERY async function. A function is asynchronus as you put the word async before it . In this case fillInput() returns a Promise<void> object because every async function returns a Promise.

将给定函数与 await 结合使用，您可以在测试中执行以下操作:

With given function in combination with await you could do something like the following in your test:

// ...
var page;

t.beforeAll(function() {
  page = getMyPage();
});

t.it('should be able to fill out form' , async function() {
  await fillInput(page.getNameInput(),  'foo');
  await fillInput(page.getLastNameField(), 'bar');
  // ...
});

这篇关于在量角器中填写表格的更有效方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！