セレン-bootstrapモーダルテストの後、後続のテストがエラーElementClickInterceptedErrorで失敗する
bootstrapモーダルを起動して閉じた後、Seleniumはページ上の他の要素を見つけることができません。
下の画面に3つのボタンが表示されます。 2つのボタンの機能のうち、bootstrap=モーダルを起動して閉じることです。3番目のボタン（中央のボタン）の機能は、単に「クリック」を受け取ることです。
個別にテストすると、3つのボタンすべてのテストはうまく機能しますが、まとめてテストすると失敗します。
モーダルを起動して閉じるテストは初めて成功しますが、その後のテストはElementClickInterceptedErrorで失敗します。
その間に十分な暗黙の待機があるため、モーダルは適切にロードできますが、問題は解決しません。
[〜＃〜] ps [〜＃〜]-最後に試す必要がある場合は、次の手順に従ってください1）以下の2つのファイルをコピー2 ）npm install Selenium-webdriverを使用してSelenium Webdriverをインストールします3）独自のフォルダーごとにテストでfileName変数を変更します。
エラースタックトレース
Ws：//127.0.0.1：50210/devtools/browser/81f6bc5f-c6f5-4255-9134-5efa67a92bed [13108：12832：0501/100716.495：ERROR：browser_switcher_service.cc（238）] XXX Init（）ElementClickInterceptedErrorをリッスンするDevTools： element click intercepted：Element ... is not clickable at po int（233、67）。他の要素はクリックを受け取ります：...（セッション情報：chrome = 81.0.4044.129）at Object.throwDecodedError（D：\ ip300-gk\node_modules\Selenium-webdriver\lib\error.js：550：15）at parseHttpResponse （D：\ ip300-gk\node_modules\Selenium-webdriver\lib\http.js：565：13）at Executor.execute（D：\ ip300-gk\node_modules\Selenium-webdriver\lib\http.js：491： 26）at processTicksAndRejections（internal/process/task_queues.js：93：5）at async Driver.execute（D：\ ip300-gk\node_modules\Selenium-webdriver\lib\webdriver.js：700：17）at async uitest（ D：\ ip300-gk\Samples\bootstrap\bs-modal-Selenium\uitest.js：34：13）{
name： 'ElementClickInterceptedError'、
テストスクリプト
const driver = require('Selenium-webdriver')
const assert = require('assert').strict;
const {Builder, By, Key, until} = require('Selenium-webdriver');
let fileName = "D:\\ip300-gk\\Samples\\bootstrap\\bs-modal-Selenium\\index.html"
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
(async function uitest() {
let driver = await new Builder().forBrowser('chrome').build();
let element
try {
await driver.get(fileName)
//Launch Modal 1 and close
await driver.findElement(By.id('launchModalButton')).click()
await driver.manage().setTimeouts( { implicit: 1000} )
await driver.findElement(By.id('closeButton')).click()
// middle button click
await driver.manage().setTimeouts( { implicit: 1000} )
await driver.findElement(By.id('button')).click()
//Launch Modal 2 and close
await driver.manage().setTimeouts( { implicit: 1000} )
await driver.findElement(By.id('launchModalButton_2')).click()
await driver.manage().setTimeouts( { implicit: 1000} )
element = await
driver.wait(until.elementLocated(By.id('closeButton_2')))
await element.click()
} catch (err) {
console.log(err)
} finally {
await driver.quit();
}
}
)()
ブートストラップページ
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Selenium </title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<div class="container">
<button type="button" id="launchModalButton" class="btn btn-primary mt-5" data-toggle="modal"
data-target="#exampleModal">
Launch modal
</button>
<button type="button" id="button" class="ml-3 btn btn-primary mt-5">
Button
</button>
<button type="button" id="launchModalButton_2" class="ml-3 btn btn-primary mt-5" data-toggle="modal"
data-target="#exampleModal_2">
Launch modal 2
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal 1
</div>
<div class="modal-footer">
<button id="closeButton" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="saveChangesButton" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal_2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel_2"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel_2">Modal 2</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal 2
</div>
<div class="modal-footer">
<button id="closeButton_2" type="button" class="btn btn-secondary" data-dismiss="modal">Close
</button>
<button id="saveChangesButton_2" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ElementNotClickable（これはWebドライバーロジックです）をバイパスするには、JavaScriptクリックだけを使用できます。
var element = await driver.findElement(By.id('button'))
driver.executeScript('arguments[0].click();', element)
このエラーメッセージ...
_[13108:12832:0501/100716.495:ERROR:browser_switcher_service.cc(238)] XXX Init() ElementClickInterceptedError: element click intercepted: Element ... is not clickable at po int (233, 67).
Other element would receive the click: ... (Session info: chrome=81.0.4044.129)
_...目的の要素に対してclick()を呼び出したときに、その要素をクリックできなかったことを意味します。
あなたが述べたように、モーダルを起動して閉じるモーダルテストは成功しますが、その後のテストはElementClickInterceptedErrorで失敗し、基本的にはclick() 2番目の要素 Button その時点で モーダルダイアログボックス にテキストがLaunch modalの要素が含まれているため、目的の要素が保護されていませんでした。したがって、目的の要素のclickが失敗しました。
細部
暗黙の待機 で始めることは、 JavaScript 、 Angular 、 ReactJS 、-を使用して構築された最新のアプリケーションでは効果的でない場合があります jQuery 、 [〜＃〜] ajax [〜＃〜] 、 Vue.js 、 Ember.js など.
実際には、 暗黙の待機を明示的な待機に置き換える を行う必要があります。
Selenium-webdriver/lib/until
elementLocated ：指定されたロケーターで要素が見つかるまでループする条件を作成します。
_
/** * Creates a condition that will loop until an element is * {@link ./webdriver.WebDriver#findElement found} with the given locator. * * @param {!(By|Function)} locator The locator to use. * @return {!WebElementCondition} The new condition. */ exports.elementLocated = function elementLocated(locator) { locator = by.checkedLocator(locator); let locatorStr = typeof locator === 'function' ? 'by function()' : locator + ''; return new WebElementCondition('for element to be located ' + locatorStr, function(driver) { return driver.findElements(locator).then(function(elements) { return elements[0]; }); }); };_elementIsVisible ：指定された要素が表示されるのを待つ条件を作成します。
_
/** * Creates a condition that will wait for the given element to become visible. * * @param {!./webdriver.WebElement} element The element to test. * @return {!WebElementCondition} The new condition. * @see ./webdriver.WebDriver#isDisplayed */ exports.elementIsVisible = function elementIsVisible(element) { return new WebElementCondition('until element is visible', function() { return element.isDisplayed().then(v => v ? element : null); }); };_
解決
したがって、implicit waitをexplicit waitで置き換える効果的なコードブロックは次のようになります。
_(async function uitest() {
let driver = await new Builder().forBrowser('chrome').build();
let element
try {
await driver.get(fileName)
//Click Launch Modal
let launchModal = await driver.wait(until.elementLocated(By.id('launchModalButton')))
launchModal = await driver.wait(until.elementIsVisible(launchModal))
await launchModal.click()
//Close Launch Modal
let closeModal = await driver.wait(until.elementLocated(By.id('closeButton')))
closeModal = await driver.wait(until.elementIsVisible(closeModal))
await closeModal.click()
//Click Button
let button = await driver.wait(until.elementLocated(By.id('button')))
button = await driver.wait(until.elementIsVisible(button))
await button.click()
//Click Launch Modal 2 and close
let launchModal2 = await driver.wait(until.elementLocated(By.id('launchModalButton_2')))
launchModal2 = await driver.wait(until.elementIsVisible(launchModal2))
await launchModal2.click()
//Close Launch Modal 2
let closeButton2 = await driver.wait(until.elementLocated(By.id('closeButton_2')))
closeButton2 = await driver.wait(until.elementIsVisible(closeButton2))
await closeButton2.click()
} catch (err) {
console.log(err)
} finally {
await driver.quit();
}
}
)()
_参考文献
関連するディスカッションは次の場所にあります。