java - 如何在selenium中模拟真实的按键输入 Action ？

Question

我正在自动化一个网络应用程序，我必须在其中填写信用卡详细信息才能完成结帐过程。我能够成功输入信用卡号，但它在应用程序中显示验证错误，表明信用卡号无效。虽然我手动输入了数字，但它没有显示。

这是 HTML:

<div dimensions="[object Object]" style="box-sizing: border-box; display: flex; align-items: stretch; flex-flow: row wrap; flex-shrink: 0; border-style: solid; border-width: 0px; position: relative; z-index: 0; min-height: 0px; min-width: 0px;"><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 1; border-style: solid; border-width: 0px; position: relative; min-height: 0px; min-width: 0px; flex-grow: 1;"><label for="cardNumber"><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: row; flex-shrink: 0; border-style: solid; border-width: 1px; position: relative; z-index: 0; min-height: 0px; min-width: 0px; height: 60px; justify-content: space-between; padding: 15px; background-color: rgb(255, 255, 255); border-color: rgb(150, 147, 145); border-top-left-radius: 5px; border-top-right-radius: 5px; width: 508px;"><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 0; border-style: solid; border-width: 0px; position: relative; z-index: 0; min-height: 0px; min-width: 0px; align-self: center; height: 20px; padding-right: 15px;"><svg focusable="false" height="20" width="20"><g transform="translate(0, 0) scale(1)"><path d="M17,16 L3,16 C2.449,16 2,15.551 2,15 L2,9 L18,9 L18,15 C18,15.551 17.551,16 17,16 M3,4 L17,4 C17.551,4 18,4.449 18,5 L18,6 L2,6 L2,5 C2,4.449 2.449,4 3,4 M17,2 L3,2 C1.346,2 0,3.346 0,5 L0,15 C0,16.654 1.346,18 3,18 L17,18 C18.654,18 20,16.654 20,15 L20,5 C20,3.346 18.654,2 17,2" fill="rgba(120, 117, 115, 1)" style="transition: fill 0.2s ease 0s;"></path><path d="M16,12.5 C16,13.329 15.329,14 14.5,14 C13.671,14 13,13.329 13,12.5 C13,11.671 13.671,11 14.5,11 C15.329,11 16,11.671 16,12.5" fill="rgba(120, 117, 115, 1)" style="transition: fill 0.2s ease 0s;"></path><path d="M13,12.5 C13,13.329 12.329,14 11.5,14 C10.671,14 10,13.329 10,12.5 C10,11.671 10.671,11 11.5,11 C12.329,11 13,11.671 13,12.5" fill="rgba(120, 117, 115, 1)" style="transition: fill 0.2s ease 0s;"></path></g></svg></div><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 1; border-style: solid; border-width: 0px; position: relative; z-index: 0; min-height: 0px; min-width: 0px; flex-grow: 0; top: -16px; width: 100%;"><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 0; border-style: solid; border-width: 0px; position: relative; z-index: 0; min-height: 0px; min-width: 0px; background-color: rgba(255, 255, 255, 0); margin-left: 0px; pointer-events: none; padding-left: 0px; width: 100%; transform: translateY(14px);"><span style="max-width: 100%; color: rgb(120, 117, 115); font-family: &quot;Klarna Text&quot;, &quot;Klarna Sans&quot;, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 30px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 100%; -webkit-font-smoothing: antialiased; text-rendering: geometricprecision; text-size-adjust: none;">Card Number</span></div><input id="cardNumber" name="cardNumber" data-cid="card-number-field" autocomplete="cc-number" type="tel" pattern="[0-9]*" spellcheck="false" value="" style="background-color: transparent; border: none; box-sizing: border-box; outline: none; width: 100%; box-shadow: none; caret-color: rgb(72, 123, 148); color: rgb(23, 23, 23); font-family: &quot;Klarna Text&quot;, &quot;Klarna Sans&quot;, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 16px; height: 60px; overflow: hidden; padding-left: 0px; padding-top: 20px; position: absolute; text-overflow: ellipsis; top: 0px; white-space: nowrap; -webkit-font-smoothing: antialiased; text-rendering: geometricprecision; transform: translateY(0px);"></div></div></label></div><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 0; border-style: solid; border-width: 0px; position: relative; z-index: 0; min-height: 0px; min-width: 0px;"><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 1; border-style: solid; border-width: 0px; position: relative; min-height: 0px; min-width: 0px; flex-grow: 1;"><label for="expire"><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: row; flex-shrink: 0; border-style: solid; border-width: 1px; position: relative; z-index: 0; min-height: 0px; min-width: 0px; height: 60px; justify-content: space-between; padding: 15px; background-color: rgb(255, 255, 255); border-color: rgb(150, 147, 145); border-bottom-left-radius: 5px; margin-top: -1px; width: 254px;"><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 0; border-style: solid; border-width: 0px; position: relative; z-index: 0; min-height: 0px; min-width: 0px; align-self: center; height: 20px; padding-right: 15px;"><svg focusable="false" width="20" height="20"><g transform="translate(0, 0) scale(1)"><path d="M16,17 L4,17 C3.448,17 3,16.551 3,16 L3,9 L17,9 L17,16 C17,16.551 16.552,17 16,17 Z M5,4 L5,5 L7,5 L7,4 L13,4 L13,5 L15,5 L15,4 L17,4 L17,7 L3,7 L3,4 L5,4 Z M15,2 L15,1 L13,1 L13,2 L7,2 L7,1 L5,1 L5,2 L1,2 L1,16 C1,17.654 2.346,19 4,19 L16,19 C17.654,19 19,17.654 19,16 L19,2 L15,2 Z" fill="rgba(120, 117, 115, 1)" style="transition: fill 0.2s ease 0s;"></path><polygon points="5 14 9 14 9 11 5 11" fill="rgba(120, 117, 115, 1)" style="transition: fill 0.2s ease 0s;"></polygon></g></svg></div><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 1; border-style: solid; border-width: 0px; position: relative; z-index: 0; min-height: 0px; min-width: 0px; flex-grow: 0; top: -16px; width: 100%;"><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 0; border-style: solid; border-width: 0px; position: relative; z-index: 0; min-height: 0px; min-width: 0px; background-color: rgba(255, 255, 255, 0); margin-left: 0px; pointer-events: none; padding-left: 0px; width: 100%; transform: translateY(14px);"><span style="max-width: 100%; color: rgb(120, 117, 115); font-family: &quot;Klarna Text&quot;, &quot;Klarna Sans&quot;, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 30px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 100%; -webkit-font-smoothing: antialiased; text-rendering: geometricprecision; text-size-adjust: none;">MM / YY</span></div><input id="expire" name="expire" config="[object Object]" data-cid="card-expire-field" autocomplete="cc-exp" pattern="[0-9]*" spellcheck="false" type="tel" value="" style="background-color: transparent; border: none; box-sizing: border-box; outline: none; width: 100%; box-shadow: none; caret-color: rgb(72, 123, 148); color: rgb(23, 23, 23); font-family: &quot;Klarna Text&quot;, &quot;Klarna Sans&quot;, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 16px; height: 60px; overflow: hidden; padding-left: 0px; padding-top: 20px; position: absolute; text-overflow: ellipsis; top: 0px; white-space: nowrap; -webkit-font-smoothing: antialiased; text-rendering: geometricprecision; transform: translateY(0px);"></div></div></label></div><input autocomplete="cc-exp-month" tabindex="-1" style="background-color: transparent; border: none; box-sizing: border-box; outline: none; width: 100%; opacity: 0; pointer-events: none; position: fixed; z-index: -1; -webkit-font-smoothing: antialiased; text-rendering: geometricprecision;"><input autocomplete="cc-exp-year" tabindex="-1" style="background-color: transparent; border: none; box-sizing: border-box; outline: none; width: 100%; opacity: 0; pointer-events: none; position: fixed; z-index: -1; -webkit-font-smoothing: antialiased; text-rendering: geometricprecision;"></div><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 1; border-style: solid; border-width: 0px; position: relative; min-height: 0px; min-width: 0px; flex-grow: 1;"><label for="securityCode"><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: row; flex-shrink: 0; border-style: solid; border-width: 1px; position: relative; z-index: 0; min-height: 0px; min-width: 0px; height: 60px; justify-content: space-between; padding: 15px; background-color: rgb(255, 255, 255); border-color: rgb(150, 147, 145); border-bottom-right-radius: 5px; width: 255px; margin-left: -1px; margin-top: -1px;"><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 0; border-style: solid; border-width: 0px; position: relative; z-index: 0; min-height: 0px; min-width: 0px; align-self: center; height: 20px; padding-right: 15px;"><svg focusable="false" height="20" width="20"><g transform="translate(0, 0) scale(1)"><path d="M15,15.547 C15,15.767 14.926,15.984 14.791,16.159 L13.669,17.611 C13.481,17.854 13.185,18 12.878,18 L7.122,18 C6.815,18 6.519,17.854 6.331,17.611 L5.209,16.159 C5.074,15.984 5,15.767 5,15.547 L5,10 L15,10 L15,15.547 Z M6,6 C6,3.794 7.794,2 10,2 C12.206,2 14,3.794 14,6 L14,8 L6,8 L6,6 Z M16,8 L16,6 C16,2.691 13.309,0 10,0 C6.691,0 4,2.691 4,6 L4,8 L3,8 L3,15.547 C3,16.208 3.222,16.859 3.626,17.381 L4.748,18.834 L4.749,18.834 C5.313,19.564 6.2,20 7.122,20 L12.878,20 C13.8,20 14.688,19.564 15.252,18.834 L16.374,17.381 C16.778,16.859 17,16.208 17,15.547 L17,8 L16,8 Z" fill="rgba(120, 117, 115, 1)" style="transition: fill 0.2s ease 0s;"></path><polygon points="9 16 11 16 11 12 9 12" fill="rgba(120, 117, 115, 1)" style="transition: fill 0.2s ease 0s;"></polygon></g></svg></div><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 1; border-style: solid; border-width: 0px; position: relative; z-index: 0; min-height: 0px; min-width: 0px; flex-grow: 0; top: -16px; width: 100%;"><div style="box-sizing: border-box; display: flex; align-items: stretch; flex-direction: column; flex-shrink: 0; border-style: solid; border-width: 0px; position: relative; z-index: 0; min-height: 0px; min-width: 0px; background-color: rgba(255, 255, 255, 0); margin-left: 0px; pointer-events: none; padding-left: 0px; width: 100%; transform: translateY(14px);"><span style="max-width: 100%; color: rgb(120, 117, 115); font-family: &quot;Klarna Text&quot;, &quot;Klarna Sans&quot;, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 30px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 100%; -webkit-font-smoothing: antialiased; text-rendering: geometricprecision; text-size-adjust: none;">CVC</span></div><input id="securityCode" name="securityCode" data-cid="card-security-code-field" autocomplete="cc-csc" type="tel" pattern="[0-9]*" spellcheck="false" value="" style="background-color: transparent; border: none; box-sizing: border-box; outline: none; width: 100%; box-shadow: none; caret-color: rgb(72, 123, 148); color: rgb(23, 23, 23); font-family: &quot;Klarna Text&quot;, &quot;Klarna Sans&quot;, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 16px; height: 60px; overflow: hidden; padding-left: 0px; padding-top: 20px; position: absolute; text-overflow: ellipsis; top: 0px; white-space: nowrap; -webkit-font-smoothing: antialiased; text-rendering: geometricprecision; transform: translateY(0px);"></div></div></label></div></div>

我尝试使用-

1. Action 类

   public void typeInField(String locator, String value) {
      String val = value;
      QAFWebElement element = getDriver().findElement(locator);
      element.clear();
      StringBuilder s = new StringBuilder();
      for (int i = 0; i < val.length(); i++) {
           char c = val.charAt(i);
           s = s.append(c);
          new Actions(getDriver()).sendKeys(element, s.toString()).build().perform();
     }
   }
   

2.JavascriptExecutor

getDriver().executeScript("arguments[0].value='" + data.get("number2").toString() + "';",
            getDriver().findElement("checkout.cardnumber.textbox"));

3.发送 key

但似乎应用程序将所有这三个检测为机器人操作而不是人类操作。 还有其他方法可以模拟相同的 Action 吗？

Answer 1

目前以下解决方案对我有用。

new Actions(getDriver()).sendKeys(getDriver().findElement(locator), Keys.chord(Keys.CONTROL, "a", Keys.DELETE),"value_to_enter").build().perform();

期待得到更多答案。