当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

protractor-cucumber-typescript

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者华知

操作系统跨平台

开源组织无

适用人群未知

软件概览

This project demonstrates the basic protractor-cucumber-typescript framework project setup.

Protractor-Cucumber-TypeScript Setup Guide

Medium Article

Please do checkout my medium article which would give you more insight on this setup. protractor-cucumber-typescript(Medium)

Features

No typings.json or typings folder, they have been replaced by better '@types' modules in package.json.
ts-node(typescript execution environment for node) in cucumberOpts.
All scripts written with > Typescript2.0 & Cucumber2.0.
Neat folder structures with transpiled js files in separate output folder.
Page Object design pattern implementation.
Extensive hooks implemented for BeforeFeature, AfterScenarios etc.
Screenshots on failure feature scenarios.

To Get Started

Pre-requisites

1.NodeJS installed globally in the system.https://nodejs.org/en/download/

2.Chrome or Firefox browsers installed.

3.Text Editor(Optional) installed-->Sublime/Visual Studio Code/Brackets.

Setup Scripts

Clone the repository into a folder
Go inside the folder and run following command from terminal/command prompt

npm install

All the dependencies from package.json and ambient typings would be installed in node_modules folder.

Run Scripts

First step is to fire up the selenium server which could be done in many ways, webdriver-manager proves very handy for this.The below command should download the chrome & gecko driver binaries locally for you!

npm run webdriver-update

Then you should start your selenium server!

npm run webdriver-start

The below command would create an output folder named 'typeScript' and transpile the .ts files to .js.

npm run build

Now just run the test command which launches the Chrome Browser and runs the scripts.

npm test

Writing Features

Feature: To search typescript in google
@TypeScriptScenario

  Scenario: Typescript Google Search
    Given I am on google page
    When I type "Typescript"
    Then I click on search button
    Then I clear the search text

Writing Step Definitions

import { browser } from "protractor";
import { SearchPageObject } from "../pages/searchPage";
const { Given } = require("cucumber");
const chai = require("chai").use(require("chai-as-promised"));
const expect = chai.expect;

const search: SearchPageObject = new SearchPageObject();

Given(/^I am on google page$/, async () => {
    await expect(browser.getTitle()).to.eventually.equal("Google");
});

Writing Page Objects

import { $ } from "protractor";

export class SearchPageObject {
    public searchTextBox: any;
    public searchButton: any;

    constructor() {
        this.searchTextBox = $("#lst-ib");
        this.searchButton = $("input[value='Google Search']");
    }
}

Cucumber Hooks

Following method takes screenshot on failure of each scenario

After(async function(scenario) {
    if (scenario.result.status === Status.FAILED) {
        // screenShot is a base-64 encoded PNG
         const screenShot = await browser.takeScreenshot();
         this.attach(screenShot, "image/png");
    }
});

CucumberOpts Tags

Following configuration shows to call specific tags from feature files

cucumberOpts: {
    compiler: "ts:ts-node/register",
    format: "json:./reports/json/cucumber_report.json",
    require: ["../../stepdefinitions/*.ts", "../../support/*.ts"],
    strict: true,
    tags: "@TypeScriptScenario or @CucumberScenario or @ProtractorScenario",
},

HTML Reports

Currently this project has been integrated with cucumber-html-reporter, which is generated in the reports folder when you run npm test.They can be customized according to user's specific needs.

Contributions

For contributors who want to improve this repo by contributing some code, reporting bugs, issues or improving documentation - PR's are highly welcome, please maintain the coding style , folder structure , detailed description of documentation and bugs/issues with examples if possible.

Contributors

_{Ram Pasala} �� ⚠️ ��	_{Burk Hufnagel} ��	_Alejandro ��	_{David Jimenez} ��

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT License

Copyright (c) 2019 Ram Pasala

使用案例

使用 Protractor、Cucumber 和 Typescript 开发自动化测试项目

Github Project: https://github.com/lijiachuan1982/protractor-cucumber-typescript 这是一个基础的项目/框架，用来使用 Protractor、Cucumber 和 Typescript 进行自动化测试，使用 Visual Studio Code 做为开发工具。前提条件在使用这个框架前，你需要先安装好下边的软件/工具：
TypeScript高级类型-Partial、Required、Pick、Omit、Readonly

Partial (可选属性，但仍然不允许添加接口中没有的属性) ts中就是让一个定义中的所有属性都变成可选参数，参数可以变多也可以少。我们定义一个user 接口，如下 interface IUser { name: string age: number department: string } //经过 Partial 类型转化后得到 type optional = Parti
通俗易懂TypeScript的高级类型方法------Partial, Required, Pick, Omit, Readonly, NonNullable

Partial（可选属性）作用：Partial将类型的属性变成可选的举例假如现在有个interface interface IActivityItem { id: number; title: string; links: string; } 然后某一天我想把IActivityItem身上的属性变成可选的，那可能就会再写一个Interface interface IActivit
Rollup + TypeScript 编译类型声明文件

hello 大家好，我是 SuperYing。本文将从工具库开发者角度讲述如何编译 TypeScript 类型声明文件。大家在使用 TS 作为开发语言，引入 JS 库的时候，经常遇到这样的报错：无法找到模块“@superying/remote-ui”的声明文件... 这是由于引用的 JS 库没有对应的类型声明文件造成的，若 @types/ 没有维护响应的类型库，则需要自己手动在 .d.ts 中声
TypeScript Essential Notes 4 - Custom Types

Defining custom types with interfaces TypeScript提供了3种自定义类型的方法：interfaces, classes, enums var todo: Todo = { name: "R", completed: false, }; var todo2 = <Todo>{...} //casting syntax强制类型转换,用这种也可以，前面
写一个基于 typescript compiler 的转换工具

背景：当你接手一些老的前端项目的时候，有时候这个项目同时又js和ts，如何快速将一个老的基于React的项目快速转换为ts风格。 ts compiler 链接是typescript官方的介绍，这里我简单说一说一些ts compiler的基本概念。 Parser 根据源代码生产ast Type Checker 可以分析生成一些推断类型 Emitter 生成器 Pre-processor 分析源代码依
Typescript 常用工具类型 Partial、Required、Readonly、Record、Pick、Omit

目录 Partial Required Readonly Record,> Pick ,> Omit,> Partial<Type> 将类型定义的所有属性都修改为可选。 type People = { name:string， age:number } type DemoPeople = Partial<People>; // 相当于 type DemoPeople = {
TypeScript utility-types插件

作用对TypeScript内置映射类型和别名的补充。下载 NPM npm install utility-types YARN yarn add utility-types 类型介绍 FunctionKeys<T> 拿到对象中所有函数类型属性的 key import { FunctionKeys } from 'utility-types'; type MixedProps =
如何在Typescript中扩展String Prototype并使用它？

GregRos.. 79 此答案适用于TypeScript 1.8+.这类问题有很多其他答案,但它们似乎都涵盖旧版本. 在TypeScript中扩展原型有两个部分. 第1部分 - 声明声明新成员,以便它可以传递类型检查.您需要声明一个与要修改的构造函数/类同名的接口,并将其放在正确的声明的命名空间/模块下.这称为范围扩充. 以这种方式扩展模块只能在特殊的声明.d.ts文件*中完成. //in a
TypeScript 工具类型 — Utility Types

TypeScript 附带了大量类型，可以帮助进行一些常见的类型操作，通常称为 Utility Types。本章介绍了最流行的工具类型。 Partial Partial 将对象中的所有属性更改为可选。 interface Point { x: number y: number } let pointPart: Partial<Point> = {} // Partial 允许 x 和
typescript常用代码片段

1. 对象属性遍历遍历方式1：使用Object.keys const p = { name: 'li', age: 18 } Object.keys(p).forEach((key)=>{ console.log((p as any)[key]) }); 遍历方式2：使用keyof interface IPerson { name: string; ag
TypeScript Compile Options

Compile Options 1. -w, --watch Watch input files. Run the compiler in monitor mode. The output files will be monitored, and when source files changes, they will be recompiled automatically. # monitor