cypress map
v1.41.0
V12+の追加のサイプレスクエリコマンド
このパッケージを開発依存関係として追加します。
$ npm i -D cypress-map
# or using Yarn
$ yarn add -D cypress-map
このパッケージを仕様またはサポートファイルに含めて、すべてのカスタムクエリコマンドを使用します
import 'cypress-map'代替：必要なクエリコマンドのみをインポートします。
import 'cypress-map/commands/map'
import 'cypress-map/commands/tap'
// and so on, see the /commands folder const double = ( n ) => n * 2
cy . wrap ( 100 ) . apply ( double ) . should ( 'equal' , 200 ) cy.thenのように機能しますが、 cy.apply(fn)はクエリコマンドです。関数fn 、サブジェクト引数のみを使用し、新しい値を返す純粋な関数であるfnがありますcy
追加の左引数をコールバック関数に渡すことができます。次に、関数を呼び出す前に、主題を最後の引数として置きます。
cy . wrap ( 8 ) . apply ( Cypress . _ . subtract , 4 ) . should ( 'equal' , - 4 )議論がなければ、 cy.applyRight cy.applyと同じように機能します。引数に合格すると、主題と引数がコールバックの引数になります。被験者は左（最初の）位置にあります
cy . wrap ( 8 ) . applyRight ( Cypress . _ . subtract , 4 ) . should ( 'equal' , 4 )
// same as
cy . wrap ( 8 )
. apply ( ( subject ) => Cypress . _ . subtract ( subject , 4 ) )
. should ( 'equal' , 4 )適用するコールバックがある場合があり、最初の引数を知っており、主題を最後の位置に置くだけです。これは、既知の引数を指定されたコールバックに部分的に適用できる場所です。
// the Cypress._.add takes to arguments (a, b)
// we know the first argument a = 5
// so we partially apply it and wait for the subject = b argument
cy . wrap ( 100 ) . partial ( Cypress . _ . add , 5 ) . should ( 'equal' , 105 )
// same as
cy . wrap ( 100 )
. apply ( ( subject ) => Cypress . _ . add ( 5 , subject ) )
. should ( 'equal' , 105 )現在のサブジェクトが配列、またはjQueryオブジェクトである場合、指定されたコールバックを最初のアイテムまたは要素に引数で適用できます。現在の主題は最後の議論になります。
// cy.applyToFirst(callback, ...args)
cy . wrap ( Cypress . $ ( '<div>100</div><div>200</div>' ) )
. applyToFirst ( ( base , el ) => parseInt ( el . innerText , base ) , 10 )
. should ( 'equal' , 100 )現在のサブジェクトが配列、またはjQueryオブジェクトである場合、指定されたコールバックを最初のアイテムまたは要素に引数で適用できます。現在の主題が最初の議論になります。
// cy.applyToFirstRight(callback, ...args)
cy . wrap ( Cypress . $ ( '<div>100</div><div>200</div>' ) )
. applyToFirstRight ( ( el , base ) => parseInt ( el . innerText , base ) , 10 )
. should ( 'equal' , 100 )多くの場合、現在の主題の最初の要素 /アイテムのメソッドを呼び出す必要があります
cy . get ( selector ) . invokeFirst ( 'getBoundingClientRect' )
// compute the vertical center for example指定されたコレクションのすべてのオブジェクトを、指定されたコールバック関数を実行して変換します。各オブジェクトをそのプロパティにマッピングすることもできます。オブジェクトは、配列またはjQueryオブジェクトである可能性があります。
// map elements by invoking a function
cy . wrap ( [ '10' , '20' , '30' ] ) . map ( Number ) // [10, 20, 30]
// map elements by a property
cy . get ( '.matching' )
. map ( 'innerText' )
. should ( 'deep.equal' , [ 'first' , 'third' , 'fourth' ] )コールバックをリストすることで、オブジェクトのプロパティをマップすることもできます。たとえば、 age財産を文字列から数に変換しましょう
cy . wrap ( {
age : '42' ,
lucky : true ,
} )
. map ( {
age : Number ,
} )
. should ( 'deep.equal' , {
age : 42 ,
lucky : true ,
} )変換は避けて、オブジェクトからプロパティのリストを選択するだけです
const person = {
name : 'Joe' ,
age : 21 ,
occupation : 'student' ,
}
cy . wrap ( person ) . map ( [ 'name' , 'age' ] ) . should ( 'deep.equal' , {
name : 'Joe' ,
age : 21 ,
} )「。」を使用して、ネストされたパスを抽出できます。あなたのプロパティパスで
cy . wrap ( people )
. map ( 'name.first' )
. should ( 'deep.equal' , [ 'Joe' , 'Anna' ] )
// equivalent to
cy . wrap ( people )
. map ( 'name' )
. map ( 'first' )
. should ( 'deep.equal' , [ 'Joe' , 'Anna' ] ) cy . get ( '#items li' )
. find ( '.price' )
. map ( 'innerText' )
. mapInvoke ( 'replace' , '$' , '' )
. mapInvoke ( 'trim' ) cy . get ( '#items li' )
. find ( '.price' )
. map ( 'innerText' )
. mapInvoke ( 'replace' , '$' , '' )
. map ( parseFloat )
. reduce ( ( max , n ) => ( n > max ? n : max ) )
// yields the highest price最初のアキュムレータ値を提供できます
cy . wrap ( [ 1 , 2 , 3 ] )
. reduce ( ( sum , n ) => sum + n , 10 )
. should ( 'equal' , 16 )Reduce.cy.jsを参照してください
cy . get ( '#items li' )
. find ( '.price' )
. map ( 'innerText' )
. tap ( ) // console.log by default
. mapInvoke ( 'replace' , '$' , '' )
. mapInvoke ( 'trim' )
// console.info with extra label
. tap ( console . info , 'trimmed strings' )通知：ラベルが提供されている場合、コールバック関数はラベルとサブジェクトで呼び出されます。
newキーワードと現在の主題を引数として使用して、指定されたコンストラクター関数を呼び出す再生可能クエリ。
cy . wrap ( 'Jan 1, 2019' )
// same as "new Date('Jan 1, 2019')"
. make ( Date )
. invoke ( 'getFullYear' )
. should ( 'equal' , 2019 )より良いcy.log ：値を生成し、 %と文字列形式の表記を使用して値をインテリジェントに弦楽器に描きます。
cy . wrap ( 42 )
. print ( ) // "42"
// and yields the value
. should ( 'equal' , 42 )
// pass formatting string
cy . wrap ( 42 ) . print ( 'the answer is %d' ) // "the answer is 42"
cy . wrap ( { name : 'Joe' } ) . print ( 'person %o' ) // 'person {"name":"Joe"}'
// use {0} with dot notation, supported deep properties
// https://github.com/davidchambers/string-format
cy . wrap ( { name : 'Joe' } ) . print ( 'person name {0.name}' ) // "person name Joe"
// print the length of an array
cy . wrap ( arr ) . print ( 'array length {0.length}' ) // "array length ..."
// pass your own function to return formatted string
cy . wrap ( arr ) . print ( ( a ) => `array with ${ a . length } items` )
// if you return a non-string, it will attempt to JSON.stringify it
cy . wrap ( arr ) . print ( ( list ) => list [ 2 ] ) // JSON.stringify(arr[2])その他の例については、print.cy.jsを参照してください
主題に単一のアイテムを見つけます。被験者は配列またはjQueryオブジェクトであると仮定します。 lodash _.findメソッドを使用します。
// using predicate function
const isThree = n => n === 3
cy . wrap ( [ ... ] ) . findOne ( isThree ) . should ( 'equal' , 3 )
// using partial known properties of an object
cy . wrap ( [ ... ] ) . findOne ( { name : 'Anna' } ) . should ( 'have.property' , 'name' , 'Anna' )Find-one.cy.jsを参照してください
cy . get ( '.matching' )
. map ( 'innerText' )
. primo ( )
. invoke ( 'toUpperCase' )
. should ( 'equal' , 'FIRST' )primo.cy.jsを参照してください
オブジェクトのcy.itsのように機能しますが、jquery cy.itsのプロパティを取得します。
cy . get ( '#items li.matching' )
. last ( )
. prop ( 'ariaLabel' )
. should ( 'equal' , 'four' )prop.cy.jsを参照してください
特定のコールバック関数を介して実行することにより、被写体内の単一のプロパティを変更します。たとえば、タイプの変換を行うのに役立ちます。「年齢」プロパティを数に変換しましょう
cy . wrap ( { age : '20' } )
. update ( 'age' , Number )
. should ( 'deep.equal' , { age : 20 } )位置kのjQueryオブジェクトからDOM要素を返します。位置kの配列からアイテムを返します。負のインデックスの場合、端からアイテムをカウントします。
cy . get ( '#items li' ) . at ( - 1 ) . its ( 'innerText' ) . should ( 'equal' , 'fifth' )at.cy.jsを参照してください
現在の主題からランダムに選ばれたアイテムまたは要素を返します
cy . get ( '#items li' ) . sample ( ) . should ( 'have.text' , 'four' )正の数を渡すと、複数の要素またはアイテムを選択します
// yields jQuery object with 3 random items
cy . get ( '#items li' ) . sample ( 3 ) . should ( 'have.length' , 3 )sample.cy.jsを参照してください
現在の主題から2番目の要素を生成します。要素または配列アイテムになる可能性があります。
cy . get ( '#items li' ) . second ( ) . should ( 'have.text' , 'second' )Second.cy.jsを参照してください
現在の被験者から3番目の要素を生成します。要素または配列アイテムになる可能性があります。
cy . get ( '#items li' ) . third ( ) . should ( 'have.text' , 'third' )Third.cy.jsを参照してください
Cypress.envオブジェクトに現在の被験者を保存します。注：cypress.envオブジェクトは、仕様の実行前にリセットされますが、変更された値はテストからテストまで渡されます。したがって、最初のテストから2番目のテストに値を簡単に渡すことができます。
it ( 'saves value in this test' , ( ) => {
cy . wrap ( 'hello, world' ) . asEnv ( 'greeting' )
} )
it ( 'saved value is available in this test' , ( ) => {
expect ( Cypress . env ( 'greeting' ) , 'greeting' ) . to . equal ( 'hello, world' )
} )あなたは本当にテストをお互いに依存させたいですか？
ドキュメントでどのように注文されていても、複数のセレクターを使用してページをクエリし、指定された順序で見つかった要素を返します。セレクターのいずれかが見つからない場合は再び取得します。
cy . getInOrder ( 'selector1' , 'selector2' , 'selector3' , ... )
// yields a single jQuery subject with
// elements for selector1
// and selector2,
// and selector3, etcセレクター文字列の1つの配列も使用することもできます
cy . getInOrder ( [ 'h1' , 'h2' , 'h3' ] )要素が安定するまで待ちたいだけです。たとえば、要素のテキストコンテンツがnミリ秒間変更されない場合、要素をtext安定と見なすことができます。
cy . get ( '#message' ) . stable ( 'text' )
// yields the elementサポートされているタイプ： text 、 value （入力要素の場合）、 css 、およびelement （要素の参照を比較）
静かな期間（ミリ秒）を制御し、 logとtimeoutオプションを渡すことができます
// stable for 500ms
// without logging
// with maximum retries duration of 6 seconds
cy . get ( '#message' ) . stable ( 'text' , 500 , { log : false , timeout : 6_000 } )CSSプロパティを安定していることを確認するときは、プロパティの名前を提供します。
// retries until the CSS animation finishes
// and the background color is red
cy . get ( '#message' )
. stable ( 'css' , 'background-color' , 100 )
// yields the element
. should ( 'have.css' , 'background-color' , 'rgb(255, 0, 0)' )stable.cy.jsおよびstable-css.cy.jsを参照してください
実験的
指定されたセレクターを持つ要素がDOMから分離するまで取得します。
cy . contains ( 'Click to re-render' ) . click ( )
cy . detaches ( '#list' )作用で剥離が正しく起こることがあり、 cy.detaches(selector)遅すぎる場合があります。剥離がすでに発生している可能性があることがわかっている場合は、 Cypress.envオブジェクトに保存されているエイリアスを使用して、それを準備する必要があります。
cy . get ( '#name2' ) . asEnv ( 'name' )
cy . contains ( 'Click to remove Joe' ) . click ( )
cy . detaches ( '@name' ) jQueryオブジェクトは、 Cypress.envにnameプロパティの下に保存されます。
DeTach.cy.jsを参照してください
現在のサブジェクトオブジェクト/配列との違いのオブジェクト/配列を計算します。
cy . wrap ( { name : 'Joe' , age : 20 } )
. difference ( { name : 'Joe' , age : 30 } )
. should ( 'deep.equal' , { age : { actual : 20 , expected : 30 } } )同期述語関数を使用して、プロパティを検証できます
// confirm the value of the "age" property
// is larger than 15
. difference ( { name : 'Joe' , age : ( n ) => n > 15 } )報告不足と追加のプロパティ。 difference.cy.jsを参照してください
注： have.lengthを使用して、配列内のアイテムの数を検証します。
// let's check if there are 3 objects in the array
// INSTEAD OF THIS
. difference ( [ Cypress . _ . object , Cypress . _ . object , Cypress . _ . object ] )
// USE AN ASSERTION
. should ( 'have.length' , 3 )予想されるオブジェクトから値 /述語を使用して、配列の被験者の各アイテムを確認できます。
// list of people objects
cy . wrap ( people )
. difference ( {
name : Cypress . _ . isString ,
age : ( age ) => age > 1 && age < 100 ,
} )
. should ( 'be.empty' )cy.tableコマンドの詳細については、Cy.Table Queryコマンドを使用してブログ投稿テストHTMLテーブルをお読みください。
現在の被験者テーブルからすべてのセルを抽出します。 2Dの文字列が生成されます。
cy . get ( 'table' ) . table ( )テーブルをスライスして、領域のみを生成できます.table(x, y, w, h)
たとえば、2 x 2のサブリージョンを取得できます
cy . get ( 'table' )
. table ( 0 , 2 , 2 , 2 )
. should ( 'deep.equal' , [
[ 'Cary' , '30' ] ,
[ 'Joe' , '28' ] ,
] )その他の例については、仕様テーブル.cy.jsを参照してください。
ヒント： cy.tableとcy.map 、 cy.mapInvokeを組み合わせてテーブルの部分を取得できます。たとえば、テーブルの同じ2x2部分を次のように抽出できます。
cy . get ( 'table' )
. table ( )
. invoke ( 'slice' , 2 , 4 )
. mapInvoke ( 'slice' , 0 , 2 )
. should ( 'deep.equal' , [
[ 'Cary' , '30' ] ,
[ 'Joe' , '28' ] ,
] )ヒント2：見出しの行を取得するには、 .tableと.itsクエリを組み合わせます
cy . get ( 'table' )
. table ( 0 , 0 , 3 , 1 )
. its ( 0 )
. should ( 'deep.equal' , [ 'Name' , 'Age' , 'Date (YYYY-MM-DD)' ] )最後の行を取得するには、できます。
cy . get ( 'table' ) . table ( ) . invoke ( 'slice' , - 1 ) . its ( 0 )最初の列を1つの配列に接続するには（1x1配列の配列の代わりに）
cy . get ( 'table' )
. table ( 0 , 1 , 1 ) // skip the heading "Name" cell
// combine 1x1 arrays into one array
. invoke ( 'flatMap' , Cypress . _ . identity )
. should ( 'deep.equal' , [ 'Dave' , 'Cary' , 'Joe' , 'Anna' ] )特別なDOMオブジェクトをプレーンオブジェクトに変換するクエリ。たとえば、 DOMStringMapインスタンスをdeep.equal
cy . get ( 'article' )
. should ( 'have.prop' , 'dataset' )
. toPlainObject ( )
. should ( 'deep.equal' , {
columns : '3' ,
indexNumber : '12314' ,
parent : 'cars' ,
} )デフォルトでは、JSON Stringifyを使用し、バックバックを解析します。 entriesとfromEntries使用を変換する場合は、引数を追加します。
cy . wrap ( new URLSearchParams ( searchParams ) ) . toPlainObject ( 'entries' ) Cypress V12では、 cy.invokeクエリになり、非同期方法での作業が非常に扱いにくくなりました。 cy.invokeOnceは、メソッドを呼び出して解決された値を生成する古い方法を返すことです。
cy . wrap ( app )
// app.fetchName is an asynchronous method
// that returns a Promise
. invokeOnce ( 'fetchName' )
. should ( 'equal' , 'My App' )その他の例については、Spec Invoke-once.cy.jsを参照してください。
cy.invoke 、 cy.map 、 cy.mapInvokeクエリコマンドの間の異なることを明確にするためのいくつかの例を以下に示します。diff.cy.jsを参照してください
const list = [ 'apples' , 'plums' , 'bananas' ]
// cy.invoke
cy . wrap ( list )
// calls ".sort()" on the list
. invoke ( 'sort' )
. should ( 'deep.equal' , [ 'apples' , 'bananas' , 'plums' ] )
// cy.mapInvoke
cy . wrap ( list )
// calls ".toUpperCase()" on every string in the list
. mapInvoke ( 'toUpperCase' )
. should ( 'deep.equal' , [ 'APPLES' , 'PLUMS' , 'BANANAS' ] )
// cy.map
const reverse = ( s ) => s . split ( '' ) . reverse ( ) . join ( '' )
cy . wrap ( list )
// reverses each string in the list
. map ( reverse )
. should ( 'deep.equal' , [ 'selppa' , 'smulp' , 'sananab' ] )
// grabs the "length" property from each string
. map ( 'length' )
. should ( 'deep.equal' , [ 6 , 5 , 7 ] ) このパッケージに別の便利なコマンド（クエリではありません！）を追加しました。同期、非同期、またはcyコマンド関数を介して、配列のサブジェクトのアイテムを1つずつ処理できます。これは、たとえばcy.eachを使用してアイテムを取得する一般的なソリューションが機能しないためです。
// fetch the users from a list of ids
// DOES NOT WORK
cy . get ( ids ) . each ( id => cy . request ( '/users/' + id ) ) . then ( users => ... )
// Nope, the yielded "users" result is ... still the "ids" subject
// ✅ CORRECT SOLUTION
cy . get ( ids ) . mapChain ( id => cy . request ( '/users/' + id ) ) . then ( users => ... ) このパッケージには、ファイルコマンド/index.d.tsのカスタムコマンドのタイプスクリプトコマンド定義が含まれています。 JavaScriptスペックから使用するには：
/// <reference types="cypress-map" />TypeScriptを使用している場合は、このモジュールをタイプリストに含めてください
{
"compilerOptions" : {
"types" : [ " cypress " , " cypress-map " ]
}
}ソースコードはSRC/コマンドフォルダーにあります。 Buildコマンドはcommandsフォルダーに入るES5コードを生成します（ソースコードコントロールにチェックされるべきではありません）。 npm分布のpackage.jsonには、 commandsとsrc/commands/index.d.tsファイルからのタイプが含まれます。
should(callback)関数を構築するための同様の機能的なヘルパーを持っています。注：サイプレスAPIには、jQueryオブジェクトの要素または配列のアイテムをフィルタリングするために使用できるクエリコマンドCy.filterとcy.invokeがfilterコマンドを持っているため、このモジュールにはフィルターメソッドがありません。 filter.cy.js仕様の例を参照してください。ビデオフィルター要素と再試行のアイテムを参照してください。
著者：Gleb Bahmutov <[email protected]>©2022
ライセンス：MIT-コードで何でもしますが、機能しなくても私を責めないでください。
サポート：このモジュールに問題がある場合は、githubで電子メール /ツイート /開く問題
