可以手动测试 Web 应用程序吗？答案

【问题标题】：It it okay to manual test web applications?可以手动测试 Web 应用程序吗？
【发布时间】：2020-06-19 21:09:28
【问题描述】：

我正在学习 TDD，并尝试在我的项目中按照最佳实践编写测试。一般来说，我在 React 中编写前端，在学习的过程中，我发现了 Robin here 的一篇关于使用 react-testing-library 进行测试的精彩帖子。我将使用 Robin 网站上的示例，但我在网上找到的其他示例也类似。因此，搜索用户输入的组件之一如下所示：

function Search({ value, onChange, children }) {
  return (
    <div>
      <label htmlFor="search">{children}</label>
      <input
        id="search"
        type="text"
        value={value}
        onChange={onChange}
      />
    </div>
  );
}

一个典型的测试用例如下所示：

describe('Search', () => {
  test('calls the onChange callback handler', () => {
    const onChange = jest.fn();

    render(
      <Search value="" onChange={onChange}>
        Search:
      </Search>
    );

    fireEvent.change(screen.getByRole('textbox'), {
      target: { value: 'JavaScript' },
    });

    expect(onChange).toHaveBeenCalledTimes(1);
  });
});

我的问题：

我们不能手动测试这个（或类似的场景）吗？
在浏览器上通过几次点击和输入来测试组件是否按预期工作是不是很容易和直观？

我认为唯一的缺点是要复制测试，我必须再次点击几下。

仅仅为了验证组件在某些用户操作后呈现它，模拟 api、回调等感觉有点矫枉过正。

当然，我在这里遗漏了一些东西。任何澄清都非常感谢。

【问题讨论】：

当然，如果您只有一个组件，手动测试很容易。但是，如果你有十个、一百个、一千个，或者……如果有多个用户角色，有很多不同的工作流程和可能的状态怎么办？如果您被要求进行一些涉及现有组件的更改，或者甚至做一些看似简单的事情，例如升级依赖项，该怎么办？您对事后一切正常的信心如何？
“我认为唯一的缺点是要复制测试，我必须再次点击几下”——没错，很像机器人。顺便说一句，这就是测试 automation 的用途。 “模拟 api、回调等只是为了验证组件在某些用户操作后呈现它感觉有点过头了”——如果您需要花费数小时来调试哪些 api、回调等导致您的测试失败，这并不是一种过分的做法。如果你不能重现问题来调试它，那就更糟了。
是的，我想随着时间的推移管理项目会更容易。

标签： reactjs testing jestjs tdd

【解决方案1】：

任何事物都有优点和缺点。 TDD（行为驱动开发、单元测试、集成测试）的优点如下：

您必须编写干净的代码。我的意思是你的方法/功能会很小，只会做一件事。您必须将cyclomatic complexity 保持在非常低的水平以使您的测试变小，每个控制结构都需要测试（ifs、switches..）。您将避免在方法中使用side effects。
您将能够重构代码，因为在没有测试的情况下重构代码就像changing one shit with another one。
这对团队和大型项目都有好处，你不可能知道所有的代码。代码中的任何更改都可能破坏功能，任何错误修复都可能产生其他几个错误。 TDD 帮助我们。

...

缺点：

您将不得不编写测试......更多代码。
在写作之前，您必须考虑更多。
在可变项目中，您不仅要更改代码，还要更改测试

...

【讨论】：

你在写作之前必须考虑更多——这对我来说似乎是积极的！
我同意你的观点，但有时管理和业务需要快速解决方案；）

【解决方案2】：

一般来说，手动测试对于大型应用程序或从长远来看是不可行的。想象一下这样一种情况，核心开发人员离开了团队，没有人知道应该手动测试什么。

有些工具可以为您进行黑盒测试和自动浏览器点击。一个不错的入门工具是好旧的Selenium。它支持多种语言，您可以从 WebDriver 版本开始。

【讨论】：