如何自动逐部分测试我的 html 代码？ [关闭]答案

【问题标题】：How can I test my html code part by part automatically? [closed]如何自动逐部分测试我的 html 代码？ [关闭]
【发布时间】：2021-09-12 12:22:00
【问题描述】：

我有一个很长的 HTML 文件，其中有很多功能可以显示和隐藏它。例如，用户可以隐藏标志、显示大标题、显示一些块，所有这些情况都可以被各种配对使用。

我可以有很多这样的案例。我需要一些东西来测试所有案例（显示或隐藏一些块，组合其中的一些等）而不评论我的部分代码。

顺便说一句，代码的结构可以在一些变化后改变，这就是我想要测试的。

如图所示，在一种情况下，它可以有徽标、地址、联系信息，在另一种情况下，它可以是空白的。

如何测试我的网络

【问题讨论】：

欢迎。请参阅How to ask 并拨打tour。你会想要尝试并添加minimal reproducible code
如果你想测试你的HTML标签，你可以使用这个[W3C的工具][1]。但是，如果您想测试您的网络功能，您可以使用 Cypress。 Cypress 是一个 npm 包，用于通过端到端的测试来测试 webside。它基于 Jquery，如果你有 Javascript 的基本知识，它很容易学习和使用。您可以在此 [minitutorial][2] 或 [documentation][3] 中了解如何安装和使用它，希望这些工具对您有用！ [1]：validator.w3.org/#validate_by_uri+with_options [2]：youtube.com/watch?v=drzcQ3Tt1hU [3]：cypress.io
非常感谢，我会阅读的
@R_M 如果此评论用于解决您的问题，请像正确答案一样检查它。
我无法将其作为正确答案进行检查，因为它是一个评论，:(

标签： javascript html jquery css dom

【解决方案1】：

您可以通过以下几种方式来实现。
我使用 jQuery 是因为它在您问题的标签上，但您也可以使用 vanilla js 来做到这一点。

$(document).ready(function() {
  $('.toggle-logo').click(function() {
    $('.logo').toggle()
  })
  
  $('.toggle-title').click(function() {
    $('.title').toggleClass('transparent')
  })
  
  $('.toggle-text').click(function() {
    $('.text').fadeToggle()
  })
  
  $('.toggle-section').click(function() {
    $('.section').slideToggle()
  })
})

.transparent {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="logo"><img src="https://dummyimage.com/60x40/cccccc/000000?text=Logo" alt="My logo"></h1>

<h2 class="title">My heading</h2>

<p class="text">My site text</p>

<div class="section">
  <p>Section</p>
</div>

<div>
  <button type="button" class="toggle-logo">Toggle logo (remove space)</button>
</div>
<div>
  <button type="button" class="toggle-title">Toggle title (keep space)</button>
</div>
<div>
  <button type="button" class="toggle-text">Toggle text (fade and remove space)</button>
</div>
<div>
  <button type="button" class="toggle-section">Toggle section (slide and remove space)</button>
</div>

【讨论】：

我想你想在你的问题中发布这个答案。请重新评估您的问题，我会用一些工具来测试您的网络。
谢谢，我正在努力寻找一些工具，无需编写自己的 js。
是的，但如果您不更改帖子的问题，我将无法发送答案。
@MCobo 如果是对问题的评论，请在问题部分进行评论，而不是在答案中。
@R_M 我明白了，然后忽略我的回答！对于一个快速的原型，我可能会使用 Vuejs 来实现更好的管理。

【解决方案2】：

有 html 验证器，但听说它是一种动态代码，所以不会有太大帮助，我认为唯一的方法是自己尝试，或者将其置于生产模式，让人们向您报告他们遇到的问题使用时查找...（测试版页面）

【讨论】：

假设我有 500 个随机变体要显示。我无法手动测试所有这些。 :(
这 500 个区块之间的结构肯定不会发生巨大变化，但是？只有内容。
结构正在发生变化，例如在一种情况下，我可以在页面顶部有一个徽标，在另一种情况下，它可以放在底部，所以我如何测试我的 HTML将徽标放在底部后会很好看。