TypeScript 环境下运行Selenium

TypeScript 环境下运行Selenium

配置安装环境

引介Javascript环境

1. Javascript搭建selenium测试环境
   https://blog.youkuaiyun.com/qq_41906031/article/details/120440951

创建项目文件夹

安装Typescript

执行命令： npm install -g typescript
查询安装： tsc -v

配置项目

1. 初始化项目文文件夹，在项目文件夹根目录执行命令
   tsc --init
2. 修改配置文件 tsconfig.json
   设置编译目录和输出目录，取消注释 rootDir 和 outDir

"rootDir": "./src",
"outDir": "./out",

3. 在项目文件根目录新建 src 和 out 文件夹
   项目文件夹结构
   

安装selenium的 @types

安装selenium-webdriver下的@types是为了实现智能提示

1. 在线安装
   执行命名

npm install @types/selenium-webdriver --save-dev

2. 离线安装
   附件链接：内附安装方法

创建运行文件

在/src目录下创建 singleinstance.ts文件

import { WebDriver, Builder } from "selenium-webdriver";

export class SingleInstance{
    private static instance: WebDriver;

    public static create_driver() {
        if(! this.instance) {
            this.instance = new Builder().forBrowser("chrome").build()  //创建一个浏览器实例
        }  // 如果instance为空就创建
        return this.instance
    }
}

// 验证
// let driver1 = SingleInstance.create_driver()
// let driver2 = SingleInstance.create_driver()

// console.log(driver1 == driver2)

在src目录下创建 excutejs.ts

import { SingleInstance } from "./singleinstance";

async function main() {
    const driver = SingleInstance.create_driver();
    await driver.get("https://www.ctrip.com");
    // let jsscript = `document.querySelector('input[id="HD_CheckIn"]').value = "2022-02-22"`
    // driver.executeScript(jsscript)
    driver.executeScript( (val: string) => {
        let dom = document.querySelector('input[id="HD_CheckIn"]') as HTMLInputElement;
        dom.value = val;
    }, "2022-02-22");
}

main()