[{"data":1,"prerenderedAt":1035},["ShallowReactive",2],{"article-en-common-shopware-testing-pitfalls":3},{"id":4,"title":5,"alt":6,"author":7,"body":10,"canonical":1015,"createdAt":1016,"description":1017,"extension":1018,"img":1019,"meta":1020,"navigation":449,"otherLanguages":1021,"path":1026,"seo":1027,"stem":1028,"tags":1029,"__hash__":1034},"articles_en\u002Farticles\u002Fcommon-shopware-testing-pitfalls.md","Moe's notes on Shopware's test automation pitfalls","common Shopware testing traps",{"name":8,"image":9},"Ramona Schwering","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F29896429?s=120&v=4",{"type":11,"value":12,"toc":992},"minimark",[13,25,33,38,43,51,55,64,113,116,134,137,155,158,162,165,169,176,180,184,187,243,248,251,255,258,370,373,376,385,388,392,396,405,408,411,457,461,464,467,470,597,601,604,607,614,735,739,743,746,771,774,782,786,789,792,795,871,874,893,896,919,926,934,938,941,979,988],[14,15,16,17,24],"p",{},"This article should be a part of specific help resources to guide you on how to inspect, debug and fix failing pipelines.\nIn a way, it's like a remark sheet for all those little hassles I encounter in my daily routine or as questions in\nStackOverflow or via ",[18,19,23],"a",{"href":20,"rel":21},"http:\u002F\u002Fshopwarecommunity.slack.com",[22],"nofollow","Shopware's community slack",". Notes serve like a check point for thoughts, right?",[26,27,30],"hint",{"title":28,"type":29},"Updated on September 28, 2021","info",[14,31,32],{},"It's a living document, so feel free to contribute, reach out to me and check at a later date, to see if new pitfalls were discovered.",[34,35,37],"h2",{"id":36},"general-things","General things",[39,40,42],"h3",{"id":41},"honorable-mention","Honorable mention",[14,44,45,46,50],{},"I already have a ",[18,47,49],{"href":48},"\u002Fblog\u002Fsmashing-common-pitfall-traps\u002F","guide"," on how to check your tests for general, common pitfall traps.\nIt might be helpful to you if you want to get a grip on inspecting all information on this topic.",[39,52,54],{"id":53},"are-there-already-presets-tests-or-other-testing-related-content-by-shopware","Are there already presets, tests or other testing related content by Shopware?",[14,56,57,58,63],{},"Of course there are - sort of. ",[18,59,62],{"href":60,"rel":61},"https:\u002F\u002Fgithub.com\u002Fshopware\u002Fplatform",[22],"Shopware 6"," is open source, so are all its tests.\nSo you can find everything connected to our tests in this repository:",[65,66,67,81,95,106],"ul",{},[68,69,70,71,75,76],"li",{},"PHPUnit tests can be found as ",[72,73,74],"code",{},"Test"," folder im many directories of the ",[18,77,80],{"href":78,"rel":79},"https:\u002F\u002Fgithub.com\u002Fshopware\u002Fplatform\u002Ftree\u002Ftrunk\u002Fsrc\u002FCore",[22],"Core bundle",[68,82,83,84,89,90],{},"Jest tests for ",[18,85,88],{"href":86,"rel":87},"https:\u002F\u002Fgithub.com\u002Fshopware\u002Fplatform\u002Ftree\u002Ftrunk\u002Fsrc\u002FStorefront\u002FResources\u002Fapp\u002Fstorefront\u002Ftest",[22],"Storefront"," and ",[18,91,94],{"href":92,"rel":93},"https:\u002F\u002Fgithub.com\u002Fshopware\u002Fplatform\u002Ftree\u002Ftrunk\u002Fsrc\u002FAdministration\u002FResources\u002Fapp\u002Fadministration\u002Ftest",[22],"Administration",[68,96,97,98,89,102],{},"Cypress tests for ",[18,99,88],{"href":100,"rel":101},"https:\u002F\u002Fgithub.com\u002Fshopware\u002Fplatform\u002Ftree\u002Ftrunk\u002Fsrc\u002FStorefront\u002FResources\u002Fapp\u002Fstorefront\u002Ftest\u002Fe2e",[22],[18,103,94],{"href":104,"rel":105},"https:\u002F\u002Fgithub.com\u002Fshopware\u002Fplatform\u002Ftree\u002Ftrunk\u002Fsrc\u002FAdministration\u002FResources\u002Fapp\u002Fadministration\u002Ftest\u002Fe2e",[22],[68,107,108],{},[18,109,112],{"href":110,"rel":111},"https:\u002F\u002Fgithub.com\u002Fshopware\u002Fplatform\u002Fblob\u002Ftrunk\u002F.gitlab-ci.yml",[22],"Pipeline configuration",[14,114,115],{},"Regarding documentation, there's already lots of content to discover, too:",[65,117,118,126],{},[68,119,120,125],{},[18,121,124],{"href":122,"rel":123},"https:\u002F\u002Fdeveloper.shopware.com\u002Fdocs\u002Fguides\u002Fplugins\u002Fplugins\u002Ftesting",[22],"Testing area"," in Shopware's developer docs",[68,127,128,133],{},[18,129,132],{"href":130,"rel":131},"https:\u002F\u002Fdeveloper.shopware.com\u002Fdocs\u002Fresources\u002Fguidelines\u002Ftesting",[22],"Testing best practises"," in the context of Shopware",[14,135,136],{},"But there's more than that. Shopware provides some preset plugins to get you covered with elpers and commads:",[65,138,139,147],{},[68,140,141,146],{},[18,142,145],{"href":143,"rel":144},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@shopware-ag\u002Fe2e-testsuite-platform",[22],"E2E Platform Testsuite"," for Shopware 6",[68,148,149,154],{},[18,150,153],{"href":151,"rel":152},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@shopware-ag\u002Fjest-preset-sw6-admin",[22],"Jest Test preset"," for Shopware 6 administration unit tests",[14,156,157],{},"Feel free to check them out. 💙",[39,159,161],{"id":160},"setup-and-start-of-tests","Setup and start of tests",[14,163,164],{},"If not stated otherwise, I assume you're using the default Shopware setup mentioned in Shopware 6's developer\ndocumentation. Thus, I'll refer to a setup based on the development template and the usage of PSH scripts.",[39,166,168],{"id":167},"may-i-waive-using-the-psh-scripts","May I waive using the PSH scripts?",[14,170,171,172,175],{},"Yes, sure! This should be easy because you can just use the normal commands. So for example with Cypress:\nJust use the path of your test's root directory (or navigate to it) and then ",[72,173,174],{},".\u002Fnode_modules\u002F.bin\u002Fcypress open",".\nWith Jest and certainly PHPUnit it should be the same. The PSH scripts serve as a wrapper around the default\ncommands anyway, so you can even take a look at those scripts to see how to start the tests by yourself.",[34,177,179],{"id":178},"php-unit-tests","PHP Unit Tests",[39,181,183],{"id":182},"again-dependency-updates","Again, dependency updates ...",[14,185,186],{},"Sometimes it's useful to not pin dependency updates, in order to detect defects due to incompatibilities or such. Let's\ntake Symfony updates as an example: There might be a case they release an update breaking our pipelines. Let's inspect a\nsudden fails connected to Symfony, e.g.:",[188,189,194],"pre",{"className":190,"code":191,"language":192,"meta":193,"style":193},"language-bash shiki shiki-themes github-light github-dark","\"Parameter #5 $default of method Symfony\\\\Component\\\\Console\\\\Command\\\\Command::addOption()\n expects array\u003Cstring>|bool|string|null, int given.\",\n","bash","",[72,195,196,234],{"__ignoreMap":193},[197,198,201,205,209,212,216,219,221,224,226,229,231],"span",{"class":199,"line":200},"line",1,[197,202,204],{"class":203},"sScJk","\"Parameter #5 ",[197,206,208],{"class":207},"sVt8B","$default",[197,210,211],{"class":203}," of method Symfony",[197,213,215],{"class":214},"sj4cs","\\\\",[197,217,218],{"class":203},"Component",[197,220,215],{"class":214},[197,222,223],{"class":203},"Console",[197,225,215],{"class":214},[197,227,228],{"class":203},"Command",[197,230,215],{"class":214},[197,232,233],{"class":203},"Command::addOption()\n",[197,235,237,240],{"class":199,"line":236},2,[197,238,239],{"class":203}," expects array\u003Cstring>|bool|string|null, int given.\"",[197,241,242],{"class":203},",\n",[244,245,247],"h4",{"id":246},"solution","Solution",[14,249,250],{},"Sure, we want to stay up to date, but this is the downside of it. So if you see an error connected to Symfony,\nmake sure to check their releases.",[39,252,254],{"id":253},"migration-fails","Migration fails",[14,256,257],{},"It might happen that our PHPUnit pipelines fail due to new or changed migrations. Here is a representative error:",[188,259,261],{"className":190,"code":260,"language":192,"meta":193,"style":193},"In AbstractMySQLDriver.php line 61:\n  An exception occurred while executing 'SELECT * FROM migration WHERE class  = ?' \n  with params [\"Shopware\\\\Core\\\\Migration\\\\Migration1536232600Language\"]:\n  SQLSTATE[42S02]: Base table or view not found: 1146 Table 'sw6.migration' doesn't exist\n",[72,262,263,278,301,334],{"__ignoreMap":193},[197,264,265,268,272,275],{"class":199,"line":200},[197,266,267],{"class":203},"In",[197,269,271],{"class":270},"sZZnC"," AbstractMySQLDriver.php",[197,273,274],{"class":270}," line",[197,276,277],{"class":270}," 61:\n",[197,279,280,283,286,289,292,295,298],{"class":199,"line":236},[197,281,282],{"class":203},"  An",[197,284,285],{"class":270}," exception",[197,287,288],{"class":270}," occurred",[197,290,291],{"class":270}," while",[197,293,294],{"class":270}," executing",[197,296,297],{"class":270}," 'SELECT * FROM migration WHERE class  = ?'",[197,299,300],{"class":207}," \n",[197,302,304,307,310,313,316,318,321,323,326,328,331],{"class":199,"line":303},3,[197,305,306],{"class":203},"  with",[197,308,309],{"class":270}," params",[197,311,312],{"class":207}," [",[197,314,315],{"class":270},"\"Shopware",[197,317,215],{"class":214},[197,319,320],{"class":270},"Core",[197,322,215],{"class":214},[197,324,325],{"class":270},"Migration",[197,327,215],{"class":214},[197,329,330],{"class":270},"Migration1536232600Language\"",[197,332,333],{"class":207},"]:\n",[197,335,337,340,343,346,349,352,355,358,361,364,367],{"class":199,"line":336},4,[197,338,339],{"class":203},"  SQLSTATE[42S02]:",[197,341,342],{"class":270}," Base",[197,344,345],{"class":270}," table",[197,347,348],{"class":270}," or",[197,350,351],{"class":270}," view",[197,353,354],{"class":270}," not",[197,356,357],{"class":270}," found:",[197,359,360],{"class":214}," 1146",[197,362,363],{"class":270}," Table",[197,365,366],{"class":270}," 'sw6.migration'",[197,368,369],{"class":270}," doesn't exist\n",[14,371,372],{},"Sometimes the migration tests fails even directly. What to do now?",[244,374,247],{"id":375},"solution-1",[14,377,378,379,384],{},"If you're writing migrations, always keep our\n",[18,380,383],{"href":381,"rel":382},"https:\u002F\u002Fdeveloper.shopware.com\u002Fdocs\u002Fguides\u002Fplugins\u002Fplugins\u002Fplugin-fundamentals\u002Fdatabase-migrations",[22],"docs"," in mind.\nIf you need to debug a failing pipeline, it may be the first step to check if all migrations are applied correctly.",[14,386,387],{},"A common error is the incorrect usage of languages. Please keep in mind that although german and english are the\ndefault languages, it doesn't mean that both of then will be available every time!",[34,389,391],{"id":390},"jest-unit-tests","Jest Unit Tests",[39,393,395],{"id":394},"jestspyon-not-working-as-expected","jest.spyOn() not working as expected",[14,397,398,399,404],{},"jest.spyOn methods is not working as expected when the method is invoked as a callback (e.g. from the template).\nSolutions from\n",[18,400,403],{"href":401,"rel":402},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F61859423\u002Fwhy-doesnt-jest-spyon-sometimes-work-on-a-vue-components-method",[22],"stackoverflow","\netc. may confuse people because we do not use named imports of the components.",[244,406,247],{"id":407},"solution-2",[14,409,410],{},"The component is saved in a variable and the spy has to be done beforehand. See here:",[188,412,416],{"className":413,"code":414,"language":415,"meta":193,"style":193},"language-javascript shiki shiki-themes github-light github-dark","const swMeteorSingleSelect = Shopware.Component.build('sw-meteor-single-select');\n\n\u002F\u002F Then proceed with your test\n","javascript",[72,417,418,445,451],{"__ignoreMap":193},[197,419,420,424,427,430,433,436,439,442],{"class":199,"line":200},[197,421,423],{"class":422},"szBVR","const",[197,425,426],{"class":214}," swMeteorSingleSelect",[197,428,429],{"class":422}," =",[197,431,432],{"class":207}," Shopware.Component.",[197,434,435],{"class":203},"build",[197,437,438],{"class":207},"(",[197,440,441],{"class":270},"'sw-meteor-single-select'",[197,443,444],{"class":207},");\n",[197,446,447],{"class":199,"line":236},[197,448,450],{"emptyLinePlaceholder":449},true,"\n",[197,452,453],{"class":199,"line":303},[197,454,456],{"class":455},"sJ8bj","\u002F\u002F Then proceed with your test\n",[39,458,460],{"id":459},"waiting-for-events-to-be-fired","Waiting for events to be fired",[14,462,463],{},"Sometimes it's necessary to wait for an event to be fired before continuing with the test for example when you're dealing with a collapsible panel in the storefront.",[244,465,247],{"id":466},"solution-3",[14,468,469],{},"Wrapping an event listener inside a promise:",[188,471,473],{"className":413,"code":472,"language":415,"meta":193,"style":193},"const isEventTriggered = new Promise((resolve) => {\n   $(collapse).on('shown.bs.collapse', () => {\n      resolve();\n   });\n});\n\n\u002F\u002F Call a method which triggers the event\n$(collapse).collapse('show');\n\n\u002F\u002F Wait till the event handler got fired\nawait isEventTriggered;\n",[72,474,475,506,529,537,542,548,553,559,577,582,588],{"__ignoreMap":193},[197,476,477,479,482,484,487,490,493,497,500,503],{"class":199,"line":200},[197,478,423],{"class":422},[197,480,481],{"class":214}," isEventTriggered",[197,483,429],{"class":422},[197,485,486],{"class":422}," new",[197,488,489],{"class":214}," Promise",[197,491,492],{"class":207},"((",[197,494,496],{"class":495},"s4XuR","resolve",[197,498,499],{"class":207},") ",[197,501,502],{"class":422},"=>",[197,504,505],{"class":207}," {\n",[197,507,508,511,514,517,519,522,525,527],{"class":199,"line":236},[197,509,510],{"class":203},"   $",[197,512,513],{"class":207},"(collapse).",[197,515,516],{"class":203},"on",[197,518,438],{"class":207},[197,520,521],{"class":270},"'shown.bs.collapse'",[197,523,524],{"class":207},", () ",[197,526,502],{"class":422},[197,528,505],{"class":207},[197,530,531,534],{"class":199,"line":303},[197,532,533],{"class":203},"      resolve",[197,535,536],{"class":207},"();\n",[197,538,539],{"class":199,"line":336},[197,540,541],{"class":207},"   });\n",[197,543,545],{"class":199,"line":544},5,[197,546,547],{"class":207},"});\n",[197,549,551],{"class":199,"line":550},6,[197,552,450],{"emptyLinePlaceholder":449},[197,554,556],{"class":199,"line":555},7,[197,557,558],{"class":455},"\u002F\u002F Call a method which triggers the event\n",[197,560,562,565,567,570,572,575],{"class":199,"line":561},8,[197,563,564],{"class":203},"$",[197,566,513],{"class":207},[197,568,569],{"class":203},"collapse",[197,571,438],{"class":207},[197,573,574],{"class":270},"'show'",[197,576,444],{"class":207},[197,578,580],{"class":199,"line":579},9,[197,581,450],{"emptyLinePlaceholder":449},[197,583,585],{"class":199,"line":584},10,[197,586,587],{"class":455},"\u002F\u002F Wait till the event handler got fired\n",[197,589,591,594],{"class":199,"line":590},11,[197,592,593],{"class":422},"await",[197,595,596],{"class":207}," isEventTriggered;\n",[39,598,600],{"id":599},"how-to-fire-an-event","How to fire an event",[14,602,603],{},"To test a certain functionality it's necessary to fire an event programmatically.",[244,605,247],{"id":606},"solution-4",[14,608,609,610,613],{},"Using the ",[72,611,612],{},"jsdom"," environment in your spec file, you're able to access the entire DOM API which allows us to fire a\ndefault event or even custom events.",[188,615,617],{"className":413,"code":616,"language":415,"meta":193,"style":193},"\u002F**\n * @jest-environment jsdom\n *\u002F\ndescribe('some spec file', () => {\n    it('should react to a click event', () => {\n        const element = document.querySelector('.my-selector');\n        const clickEvent = new Event('click');\n\n        element.dispatchEvent(clickEvent);\n    });\n})\n",[72,618,619,624,629,634,650,666,689,710,714,725,730],{"__ignoreMap":193},[197,620,621],{"class":199,"line":200},[197,622,623],{"class":455},"\u002F**\n",[197,625,626],{"class":199,"line":236},[197,627,628],{"class":455}," * @jest-environment jsdom\n",[197,630,631],{"class":199,"line":303},[197,632,633],{"class":455}," *\u002F\n",[197,635,636,639,641,644,646,648],{"class":199,"line":336},[197,637,638],{"class":203},"describe",[197,640,438],{"class":207},[197,642,643],{"class":270},"'some spec file'",[197,645,524],{"class":207},[197,647,502],{"class":422},[197,649,505],{"class":207},[197,651,652,655,657,660,662,664],{"class":199,"line":544},[197,653,654],{"class":203},"    it",[197,656,438],{"class":207},[197,658,659],{"class":270},"'should react to a click event'",[197,661,524],{"class":207},[197,663,502],{"class":422},[197,665,505],{"class":207},[197,667,668,671,674,676,679,682,684,687],{"class":199,"line":550},[197,669,670],{"class":422},"        const",[197,672,673],{"class":214}," element",[197,675,429],{"class":422},[197,677,678],{"class":207}," document.",[197,680,681],{"class":203},"querySelector",[197,683,438],{"class":207},[197,685,686],{"class":270},"'.my-selector'",[197,688,444],{"class":207},[197,690,691,693,696,698,700,703,705,708],{"class":199,"line":555},[197,692,670],{"class":422},[197,694,695],{"class":214}," clickEvent",[197,697,429],{"class":422},[197,699,486],{"class":422},[197,701,702],{"class":203}," Event",[197,704,438],{"class":207},[197,706,707],{"class":270},"'click'",[197,709,444],{"class":207},[197,711,712],{"class":199,"line":561},[197,713,450],{"emptyLinePlaceholder":449},[197,715,716,719,722],{"class":199,"line":579},[197,717,718],{"class":207},"        element.",[197,720,721],{"class":203},"dispatchEvent",[197,723,724],{"class":207},"(clickEvent);\n",[197,726,727],{"class":199,"line":584},[197,728,729],{"class":207},"    });\n",[197,731,732],{"class":199,"line":590},[197,733,734],{"class":207},"})\n",[34,736,738],{"id":737},"end-to-end-tests-with-cypress","End-to-End Tests with Cypress",[39,740,742],{"id":741},"local-error-when-starting-cypress-in-docker-environment","Local error when starting Cypress in docker environment",[14,744,745],{},"If you're working with Shopware's default docker setup, you might stumble across the following error message:",[188,747,749],{"className":190,"code":748,"language":192,"meta":193,"style":193},"No protocol specified (Cypress:92): Gtk-WARNING \\*\\*: 09:39:50.737: cannot open display: :0 \n",[72,750,751],{"__ignoreMap":193},[197,752,753,756,759,762,765,768],{"class":199,"line":200},[197,754,755],{"class":203},"No",[197,757,758],{"class":270}," protocol",[197,760,761],{"class":270}," specified",[197,763,764],{"class":207}," (Cypress:92): Gtk-WARNING ",[197,766,767],{"class":214},"\\*\\*",[197,769,770],{"class":207},": 09:39:50.737: cannot open display: :0\n",[244,772,247],{"id":773},"solution-5",[14,775,776,777,781],{},"Based on this ",[18,778,49],{"href":779,"rel":780},"https:\u002F\u002Fwww.cypress.io\u002Fblog\u002F2019\u002F05\u002F02\u002Frun-cypress-with-a-single-docker-command\u002F#Interactive-mode",[22],"\nyou need to forward the XVFB messages from Cypress out of the Docker container into an X11 server\nrunning on the host machine. The guide mentioned shows an example for Mac; other operating systems might require\ndifferent commands. A starting point is trying out xhost configuration fitting to your needs. A possible command\ncould be xhost +local:",[34,783,785],{"id":784},"my-tests-are-only-failing-sometimes","My tests are only failing sometimes",[14,787,788],{},"In CI, I see that a tests is failing in a non-deterministic way: Sometimes is passes, sometimes it fails.",[244,790,247],{"id":791},"solution-6",[14,793,794],{},"To make this behaviour reproducible, please put it in a loop and execute it approx. 20-30 times.\nI recommend running that in CI, but it's possible to do that locally as well.",[188,796,798],{"className":413,"code":797,"language":415,"meta":193,"style":193},"\u002F\u002F Use in build Lodash to repeat the test 100 times\nCypress._.times(100, (k) => {\n   it(`typing hello ${k + 1} \u002F 100`, () => {\n       \u002F\u002F Write your test steps in here\n   })\n})\n",[72,799,800,805,830,857,862,867],{"__ignoreMap":193},[197,801,802],{"class":199,"line":200},[197,803,804],{"class":455},"\u002F\u002F Use in build Lodash to repeat the test 100 times\n",[197,806,807,810,813,815,818,821,824,826,828],{"class":199,"line":236},[197,808,809],{"class":207},"Cypress._.",[197,811,812],{"class":203},"times",[197,814,438],{"class":207},[197,816,817],{"class":214},"100",[197,819,820],{"class":207},", (",[197,822,823],{"class":495},"k",[197,825,499],{"class":207},[197,827,502],{"class":422},[197,829,505],{"class":207},[197,831,832,835,837,840,842,845,848,851,853,855],{"class":199,"line":303},[197,833,834],{"class":203},"   it",[197,836,438],{"class":207},[197,838,839],{"class":270},"`typing hello ${",[197,841,823],{"class":207},[197,843,844],{"class":422}," +",[197,846,847],{"class":214}," 1",[197,849,850],{"class":270},"} \u002F 100`",[197,852,524],{"class":207},[197,854,502],{"class":422},[197,856,505],{"class":207},[197,858,859],{"class":199,"line":336},[197,860,861],{"class":455},"       \u002F\u002F Write your test steps in here\n",[197,863,864],{"class":199,"line":544},[197,865,866],{"class":207},"   })\n",[197,868,869],{"class":199,"line":550},[197,870,734],{"class":207},[14,872,873],{},"If you see that were are indeed some fails, you might start by checking timing. If working locally you can use the\nfollowing command to pause and resume Cypress test execution:",[188,875,877],{"className":413,"code":876,"language":415,"meta":193,"style":193},"cy.pause(); \u002F\u002F This will pause the test, until you manually resume it\n",[72,878,879],{"__ignoreMap":193},[197,880,881,884,887,890],{"class":199,"line":200},[197,882,883],{"class":207},"cy.",[197,885,886],{"class":203},"pause",[197,888,889],{"class":207},"(); ",[197,891,892],{"class":455},"\u002F\u002F This will pause the test, until you manually resume it\n",[14,894,895],{},"When working in CI, use a temporary wait to check the timing:",[188,897,899],{"className":413,"code":898,"language":415,"meta":193,"style":193},"cy.wait(500); \u002F\u002F Time in ms, so this will wait for half a second\n",[72,900,901],{"__ignoreMap":193},[197,902,903,905,908,910,913,916],{"class":199,"line":200},[197,904,883],{"class":207},[197,906,907],{"class":203},"wait",[197,909,438],{"class":207},[197,911,912],{"class":214},"500",[197,914,915],{"class":207},"); ",[197,917,918],{"class":455},"\u002F\u002F Time in ms, so this will wait for half a second\n",[26,920,923],{"title":921,"type":922},"Be cautious!","error",[14,924,925],{},"Only use fixed waiting times temporarily, in order to debug. Replace this wait with a dynamic assertion if the\nflakiness is caused by timing issues. See our best practises and Cypress Best practices for further information.\nNeedless to say, you should remove the loop as well, as soon as you're done with debugging.",[14,927,928,929,933],{},"If you want to learn more on this topic, there's an article by me on ",[18,930,932],{"href":931},"\u002Fblog\u002Fsmashing-flaky-tests\u002F","flakiness",".",[39,935,937],{"id":936},"the-element-i-want-to-interact-with-is-not-available-anymore","The element I want to interact with is not available anymore",[14,939,940],{},"Sometimes, an element will be re-rendered or uses an animation which cause it to disappear for a blink or not\nbeing ready to interact with. The following error is the most famous one:",[188,942,944],{"className":190,"code":943,"language":192,"meta":193,"style":193},"cy.click failed because the element has been detached from the DOM\n",[72,945,946],{"__ignoreMap":193},[197,947,948,951,954,957,960,962,965,968,971,974,976],{"class":199,"line":200},[197,949,950],{"class":203},"cy.click",[197,952,953],{"class":270}," failed",[197,955,956],{"class":270}," because",[197,958,959],{"class":270}," the",[197,961,673],{"class":270},[197,963,964],{"class":270}," has",[197,966,967],{"class":270}," been",[197,969,970],{"class":270}," detached",[197,972,973],{"class":270}," from",[197,975,959],{"class":270},[197,977,978],{"class":270}," DOM\n",[14,980,981,982,987],{},"Actually, there are many possible fixes or workaround, might be a wonderful idea for an own article I think.\nIn the meantime, Cypress themselves wrote a ",[18,983,986],{"href":984,"rel":985},"https:\u002F\u002Fcypress.io\u002Fblog\u002Ftag\u002Fflake\u002F",[22],"blog series"," on many of those issues.",[989,990,991],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":193,"searchDepth":236,"depth":236,"links":993},[994,1000,1004,1009,1012],{"id":36,"depth":236,"text":37,"children":995},[996,997,998,999],{"id":41,"depth":303,"text":42},{"id":53,"depth":303,"text":54},{"id":160,"depth":303,"text":161},{"id":167,"depth":303,"text":168},{"id":178,"depth":236,"text":179,"children":1001},[1002,1003],{"id":182,"depth":303,"text":183},{"id":253,"depth":303,"text":254},{"id":390,"depth":236,"text":391,"children":1005},[1006,1007,1008],{"id":394,"depth":303,"text":395},{"id":459,"depth":303,"text":460},{"id":599,"depth":303,"text":600},{"id":737,"depth":236,"text":738,"children":1010},[1011],{"id":741,"depth":303,"text":742},{"id":784,"depth":236,"text":785,"children":1013},[1014],{"id":936,"depth":303,"text":937},null,"2021-09-28T00:00:00.724Z","Sometimes, our pipelines fail. If that happens on our own merge requests, we need to fix it - I can imagine you feel the same if you're working with Shopware's tests. These are my notes on common test automation traps in the context of working with Shopware.","md","shopware-testing-bugs\u002Fbingo.jpg",{},[1022],{"locale":1023,"name":1024,"path":1025},"de","german","\u002Fde\u002Fblog\u002Fcommon-shopware-testing-pitfalls","\u002Farticles\u002Fcommon-shopware-testing-pitfalls",{"title":5,"description":1017},"articles\u002Fcommon-shopware-testing-pitfalls",[1030,1031,1032,1033],"Shopware","Unit Tests","End-To-End Tests","Testing pitfalls","aM8s91kBqrOxBxAzW35V-U_kDOYwSx5JBEq40Q8k0PY",1784632035836]