cypress ts项目相关配置
<p>[TOC]</p>
<p>Write tests in TypeScript.</p>
<h1>1.创建一个ts类型的cypress项目</h1>
<ol>
<li>安装typescript（如已安装请忽略）
<pre><code>npm install --save-dev typescript</code></pre></li>
<li>ts初始化
<pre><code>cd <projectPath>
tsc --init</code></pre></li>
<li>安装cypress
<pre><code>npm install --save-dev cypress</code></pre></li>
<li>修改文件类型为ts(integration\support文件夹下)
cypress 无默认生成ts项目的脚手架，故需手动修改文件类型。
<h1>2.ts项目中使用Custom Commands</h1>
<p>An example for ECP login:</p></li>
</ol>
<pre><code>*cypress\support\commands.ts
-----
// add new command to the existing Cypress interface
// Must be declared global to be detected by typescript (allows import/export)
declare global {
namespace Cypress {
interface Chainable {
login(userName: string, password: string): void
}
}
}
// add commands to Cypress
Cypress.Commands.add('login', (userName, password, language="zh_CN") => {
let options = {
onBeforeLoad (win) {
Object.defineProperty(win.navigator, 'language', {
//value: 'zh_CN', 'en-US'
value: `${language}`
});
}
}
cy.visit('/ecp/login', options);
cy.contains('普通登录').click()
cy.get('[id=userName]').type(userName)
cy.get('[id=password]').type(password)
cy.get('.ant-btn').click()
cy.url().should('contain', '/ecp/index')
cy.getCookie('ecp_id')
.should('exist').then((c) => {
Cypress.env('cookie', c.value);
cy.setCookie("ecp_id", c.value);
cy.log('cookie fetched. ', c.value)
})
})
// Convert this to a module instead of script (allows import/export)
export {}</code></pre>
<p>调用方式与js相同</p>
<pre><code>*cypress\integration\todo.ts
------
describe('example to-do app', () => {
beforeEach(() => {
cy.login('qa.smoke.sys.admin','Qcyt31s@!!')
})
it('displays two todo items by default', () => {
cy.get('.todo-list li').should('have.length', 2)
})
})
</code></pre>
<p>tsconfig.json, 仅供参考</p>
<pre><code>{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress"]
},
"exclude": ["node_modules"],
"include": ["./cypress/**/*.ts", "cypress/plugins/index.js"]
}</code></pre>
<h1>Some examples</h1>
<p><strong>Out-of-the-box TypeScript</strong></p>
<p><strong>add-cypress-custom-command-in-typescript</strong></p>
<p><strong>Typescript with Webpack</strong></p>
<p><strong>Typescript with Browserify</strong></p>
<h1>参考</h1>
<p>[1]. <a href="https://docs.cypress.io/guides/tooling/typescript-support#Install-TypeScript">官方文档</a>
[2]. <a href="https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/fundamentals__typescript">Out-of-the-box TypeScript</a>
[3]. <a href="https://github.com/cypress-io/add-cypress-custom-command-in-typescript">add-cypress-custom-command-in-typescript</a>
[4]. <a href="https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/preprocessors__typescript-browserify">Typescript with Browserify</a>
[5]. <a href="https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/preprocessors__typescript-webpack">Typescript with Webpack</a></p>