Selenium系列教程-10 如何执行JavaScript方法

时间 2019-11-17

标签 selenium 系列教程如何执行 javascript 方法栏目 JavaScript 繁體版

原文原文链接

系列资源：javascript

主要内容

如何执行JavaScript方法
应用场景

如何执行JavaScript方法

在selenium的api中，为咱们提供了executeScript() 方法，可在浏览器窗口中执行一段JavaScript代码。node.js的调用以下:java

driver.executeScript(function(){
    // javascript 代码})
复制代码

或者能够用executeAsyncScript方法异步执行这段脚本。node

应用场景

为日期控件设置值
当自动化日期控件的时候，若是按照常规的操做，须要经过开发者工具定位到元素，以后调用selenium的click()方法进行点击。这种操做在当时的状况下是有效的。可是，过了一段时间，假如到了下个月，咱们再次运行自动化代码的时候，就会发现功能运行不正常。由于日期更改后，日历控件布局发生了变化。下面举例说明，如图：web

这种状况下，原始的自动化操做方式不能知足咱们的须要，由于没法用固定的selector动态定位某个日期的元素。这个时候，最简单的方法就是使用JavaScript将日期控件设置为某个值。以node.js为例，咱们能够使用executeScript()方法执行JavaScript代码来实现自动化的需求，代码以下：chrome
```
require('chromedriver')

let { Builder } = require('selenium-webdriver')

const driver = new Builder().forBrowser('chrome').build();

driver.get('https://ant.design/components/date-picker-cn/')

driver.executeScript(function(){
    let date = new Date().toLocaleDateString()
    document.querySelector('.ant-calendar-picker-input.ant-input').value=date
})
复制代码
```
滚动视图
有些时候，咱们须要为界面进行截屏操做。页面若是太长的话，咱们的截屏默认截取的为可视部分，未显示的部分就会截不到。为了解决这种问题，咱们一样能够执行JavasScript的方法来实现。例如，百度新闻页面很长，我须要截取国际新闻的界面，就能够先使用js代码将国际新闻板块滚动到当前视图中，以后再执行截屏。node.js代码以下:api
```
require('chromedriver');

let { Builder } = require('selenium-webdriver');

const driver = new Builder().forBrowser('chrome').build();

driver.get('https://ant.design/components/date-picker-cn/');

driver.executeScript(function(){
    //调用JavaScript视图滚动方法
    document.querySelector('#guoji').scrollIntoView();

})

driver.takeScreenshot('<your file path>');

复制代码
```
获取更多资讯，能够关注公众号,也能够加QQ群：707467292 进行node.js自动化相关技术交流。浏览器