QATester weird Error: clickable element "ADD" was not found by text|CSS|xpath

Question

伙计们！我正在完成与 PHP/MySql 应用相关的评估；我从头开始学习，因为我以前从未见过 PHP，而且我不得不承认，如果没有你的帮助，我永远不会走到这一步。现在...应用程序运行可以顺利完成所有功能，事情是当我尝试运行 QATest 时，每个人都通过了，除了一个：错误：text|CSS|xpath 未找到可点击元素“ADD” 这个错误让我抓狂，因为 ADD 按钮运行在剩下的测试中没问题。这是我的 Index.php:

<?php include("db.php"); ?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST ASSESMENT</title>
    <!--- Bootstrap CSS --->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <div class="header"style="margin-top:50px;">  
    <form action="delete_product.php" method="post">      
        <div class="alignButton" style="display:flex; justify-content:space-between">
            <a style="margin-left:30px;text-decoration:none;color:black;font-size:30px;" href="index.php">Product List</a>
            <div class="alignButtons" style="display:flex; justify-content:flex-end">
                <button  style="margin-right:50px;" id="add" type="button" class="btn btn-primary" name="add" onclick="window.location.href='product_add.php'">ADD</button>    
                <button   style="margin-right:50px;" id="delete-product-btn" type="submit" name="mass_delete" class="btn btn-danger">MASS DELETE</button>   
            </div>
           
        </div>
        <hr/>
    </div>

    <div  class="py-5">
        <div class="container">
            <div class="row hidden-md-up">
             <!--Get all products from DB-->
            <?php
                $query = "SELECT * FROM products";
                $result_products = mysqli_query($conn, $query);
                while($row = mysqli_fetch_array($result_products)) { ?> 
                
                <!-- <?php 
                    if(isset($_SESSION['status'])){
                        echo "<h4>".$_SESSION['status']."</h4>";
                        unset($_SESSION['status']);
                    }
                ?>   -->
                <div class="col-sm-4">
                    <div class="card" style="margin:10px;padding:10px;width:250px;">
                        <input class="delete-checkbox" type="checkbox" name="check_list[]" value="<?php echo $row['id']; ?>">
                        
                        <label><?php echo $row['sku']; ?> : <?php echo $row['prod_type']; ?></label>
                        <h5><?php echo $row['name']; ?></h5>
                        <p>$<?php echo $row['price']; ?></p>
                        <!--Conditional rendering depending on product type-->
                        <?php if ($row['prod_type'] == 'DVD'): ?>
                        <p>Size: <?php echo $row['dvd']; ?>MB</p>

                        <?php elseif ($row['prod_type'] == 'BOOK'): ?>
                        <p>Weight: <?php echo $row['book']; ?> Kgs.</p>

                        <?php elseif ($row['prod_type'] == 'FUR'): ?>
                        <p> H:<?php echo $row['fur_h']; ?>x W:<?php echo $row['fur_h']; ?>x L:<?php echo $row['fur_l']; ?></p>  

                        <?php endif ?>

                    </div>
                </div>    
            <?php } ?>        
            </div>        
        </div>
    </div>
</form>
</div>

      
<!--- Bootstrap JS --->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>

这是 QATester 问题：

查看首页基本要求 951毫秒 

Error: Clickable element "ADD" was not found by text|CSS|XPath

Error: Clickable element "ADD" was not found by text|CSS|XPath
    at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
    at assertElementExists (node_modules/codeceptjs/lib/helper/WebDriver.js:2835:11)
    at WebDriver.click (node_modules/codeceptjs/lib/helper/WebDriver.js:917:7)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
I }) => {
        I.amOnPage('/');
        I.click('MASS DELETE');
        I.click('ADD');

后面的第11个测试通过ok。即使是同一个 test.I 上的按钮 MASS DELETE 也试图切换按钮顺序（批量删除和添加），用 class/id 声明它们；重命名按钮添加，添加，添加；将按钮移到容器外 div...无法弄清楚问题是什么或我遗漏了什么。我真的很感激任何关于它的 help/clue/tip。提前问好！

Answer 1

我遇到了同样的问题。只需在按钮之间放置更大的边距 :)

Answer 2

答：只需在添加按钮中添加文本ADD。会过去的。如果您有不同页面的多个导航。在按钮标签内输入准确的 'ADD' 文本。

这是我的导航并且有效：它是反应式的，但与 html

相似

 <header>
  <nav className="nav px-3 m-auto d-flex justify-content-between align-items-center border-bottom">
    <h3 className="nav-title">
      <Link to="/">Product {isProductListPage ? "List" : "Add"}</Link>
    </h3>
    <div className="nav-list d-flex align-items-center">
      <Link to="/add-product">
        <button className="nav-list-add btn me-3">
        ADD
        </button>
      </Link>
      <button id="delete-product-btn" onClick={handleDelete} className="btn btn-danger">MASS DELETE</button>
    </div>
  </nav>
</header>

QATester weird Error: clickable element "ADD" was not found by text|CSS|xpath

QATester weird Error: clickable element "ADD" was not found by text|CSS|xpath

html

xpath

automated-tests