scrollIntoViewIfNeeded 脚本不适用于量角器
scrollIntoViewIfNeeded script not working with protractor
我正在使用量角器开发自动化网络测试。
有时,我想在单击某个元素之前将其滚动到视图中(这是有道理的),我使用“scrollIntoView”脚本执行此操作。
当我向下滚动时,这并不总是有效,因为当帐户未验证时底部会出现一个横幅,它会覆盖元素。
我在浏览器控制台中执行了 elmement.scrollIntoViewIfNeeded(true),无论是向上滚动还是向下滚动,它都非常有效。
问题是,当我在测试中使用它时,它不起作用。
这是一个代码片段。
/**
* Scrolls the element into view
* */
async scrollIntoView() {
await browser.executeScript('arguments[0].scrollIntoViewIfNeeded(true)', this.webElement.getWebElement());
}
我还制作了一个名为 class 的按钮来表示 DOM 中具有“按钮”标签的元素,这也是代码片段。
/**
* A class that handles actions on buttons.
* */
export class Button extends WebComponent {
/**
* @param webElementText Text that the web element contains.
* @param locatorType Locator type of the web element to search for.
* @param locator Locator of the web element to search for.
* @param parentElement Parent Web Component if it exists.
*/
constructor(webElementText, locatorType, locator, parentElement: WebComponent = null) {
super(webElementText, locatorType, locator, parentElement);
}
/**
* Clicks on the WebElement found
* The click can be done with either JavaScript or with an interaction with the UI.
* @param usingJavaScript {boolean} Boolean to decide whether to use JavaScript for the click or a UI interaction.
*/
async click(usingJavaScript = false) {
if (usingJavaScript) {
await this.isPresent();
await browser.executeScript("arguments[0].click();", await this.webElement.getWebElement());
}
else {
await this.isPresent();
await this.scrollIntoView();
await this.isVisible();
await this.isClickable();
await this.webElement.click();
}
}
}
2 个假设为什么这行不通:
- 你打电话给
click()
没有 await
this.webElement.getWebElement()
- 定位器有问题
除此之外,我觉得一切都很好。
如果你做不到,试试我的方法,对我有用
/**
* Scrolls to passed element and then Y pixels down by injecting js scroll() in the context of window
* @param {ElementFinder} $element Locator of element
* @param {number} [offsetY=0] Offset by Y axis (how much extra pixels to scroll)
* @param {number} [sleep=200] wait after scroll to allow scrolling animation to complete
* @return {Promise}
*/
scroll: async ($element, offsetY = 0, sleep = 200) => {
await browser.executeScript(`arguments[0].scrollIntoView({block: "center"});`, $element.getWebElement());
await browser.sleep(sleep);
}
请注意,{block: "center"}
使其滚动直到元素位于页面中间,并且确实解决了 footers/headers 与它重叠时的问题
我正在使用量角器开发自动化网络测试。
有时,我想在单击某个元素之前将其滚动到视图中(这是有道理的),我使用“scrollIntoView”脚本执行此操作。
当我向下滚动时,这并不总是有效,因为当帐户未验证时底部会出现一个横幅,它会覆盖元素。
我在浏览器控制台中执行了 elmement.scrollIntoViewIfNeeded(true),无论是向上滚动还是向下滚动,它都非常有效。
问题是,当我在测试中使用它时,它不起作用。
这是一个代码片段。
/**
* Scrolls the element into view
* */
async scrollIntoView() {
await browser.executeScript('arguments[0].scrollIntoViewIfNeeded(true)', this.webElement.getWebElement());
}
我还制作了一个名为 class 的按钮来表示 DOM 中具有“按钮”标签的元素,这也是代码片段。
/**
* A class that handles actions on buttons.
* */
export class Button extends WebComponent {
/**
* @param webElementText Text that the web element contains.
* @param locatorType Locator type of the web element to search for.
* @param locator Locator of the web element to search for.
* @param parentElement Parent Web Component if it exists.
*/
constructor(webElementText, locatorType, locator, parentElement: WebComponent = null) {
super(webElementText, locatorType, locator, parentElement);
}
/**
* Clicks on the WebElement found
* The click can be done with either JavaScript or with an interaction with the UI.
* @param usingJavaScript {boolean} Boolean to decide whether to use JavaScript for the click or a UI interaction.
*/
async click(usingJavaScript = false) {
if (usingJavaScript) {
await this.isPresent();
await browser.executeScript("arguments[0].click();", await this.webElement.getWebElement());
}
else {
await this.isPresent();
await this.scrollIntoView();
await this.isVisible();
await this.isClickable();
await this.webElement.click();
}
}
}
2 个假设为什么这行不通:
- 你打电话给
click()
没有await
this.webElement.getWebElement()
- 定位器有问题
除此之外,我觉得一切都很好。
如果你做不到,试试我的方法,对我有用
/**
* Scrolls to passed element and then Y pixels down by injecting js scroll() in the context of window
* @param {ElementFinder} $element Locator of element
* @param {number} [offsetY=0] Offset by Y axis (how much extra pixels to scroll)
* @param {number} [sleep=200] wait after scroll to allow scrolling animation to complete
* @return {Promise}
*/
scroll: async ($element, offsetY = 0, sleep = 200) => {
await browser.executeScript(`arguments[0].scrollIntoView({block: "center"});`, $element.getWebElement());
await browser.sleep(sleep);
}
请注意,{block: "center"}
使其滚动直到元素位于页面中间,并且确实解决了 footers/headers 与它重叠时的问题