{"id":48916,"date":"2023-04-07T16:11:34","date_gmt":"2023-04-07T23:11:34","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=48916"},"modified":"2025-01-17T10:19:05","modified_gmt":"2025-01-17T15:19:05","slug":"using-web-selectors-in-cypress","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/","title":{"rendered":"Let the Engineers Speak: Selectors in Cypress"},"content":{"rendered":"\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>Applitools hosted a webinar,&nbsp;<a href=\"https:\/\/app14743.cloudwayssites.com\/event\/selectors-locators-cypress-webdriverio-webinar\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Let the Engineers Speak: Selectors<\/span><\/strong><\/a>, where testing experts discussed one of the most common pain points that pretty much anyone who\u2019s ever done web UI testing has felt. The <strong><a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-webdriverio\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"text-decoration: underline;\">first article in our two-part series<\/span><\/a><\/strong> defined our terms and challenges of locating web elements using selectors, as well as recapped Christian\u2019s WebDriverIO selectors tutorial and WebdriverIO Q&amp;A. Be sure to read that article first to help set context.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-introducing-our-experts\">Introducing our experts<\/h2>\n\n\n\n<p>I\u2019m Pandy Knight, the <a href=\"https:\/\/automationpanda.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Automation Panda<\/span><\/strong><\/a>. I moderated our two testing experts in our discussion of selectors:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/bromann.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Christian Bromann<\/span><\/strong><\/a>, <em>WebdriverIO<\/em><\/li>\n\n\n\n<li><a href=\"https:\/\/filiphric.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Filip Hric<\/span><\/strong><\/a>, <em>Cypress<\/em><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-locating-web-elements-with-cypress\">Locating web elements with Cypress<\/h2>\n\n\n\n<p>Filip walked us through selectors in Cypress, starting with the basics and using Trello as an example app.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong><em>Note<\/em><\/strong><em>: All the following text in this section is based on Filip\u2019s part of the webinar. Filip\u2019s repository is available on <\/em><a href=\"https:\/\/github.com\/filiphric\/applitools-selectors-webinar\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong><span style=\"text-decoration: underline;\">GitHub<\/span><\/strong><\/em><\/a><em>.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p>When talking about selectors in web applications, we are trying to target an HTML element. Cypress has two basic commands that can help with selecting these elements: cy.get and cy.contains. In Filip\u2019s example demo, he has VS Code on the left side of his screen and Cypress running in graphic user interface mode (open mode) on the right side.<\/p>\n\n\n\n<p>The example test uses different kinds of selector strategies, with each approach using either the get command or the contains command.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-locating-elements-by-class-id-or-attribute\">Locating elements by class, ID, or attribute<\/h2>\n\n\n\n<p>The first first approach calls <code>cy.get(\u2018h2\u2019)<\/code> using the H2 tag. In the Cypress window, if you hover over the get h2 command, it will highlight the selector that has been selected.<\/p>\n\n\n\n<p>If you\u2019re struggling to find the right selector in Cypress, there&#8217;s this really nice tool that basically works like the inspect element tool, but you don&#8217;t have to open the dev tools if you don&#8217;t want to.<\/p>\n\n\n\n<p>In our other three approaches with the get command, we are using the class, the ID, and the attribute, respectively:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">  cy.get('h2')\n  cy.get('.board') \/\/ class\n  cy.get('#board-1') \/\/ id\n  cy.get('[data-cy=board-item]') \/\/ attribute<\/code><\/pre>\n\n\n\n<p>The syntax for the get commands is basically just CSS selectors. If you are selecting an element with a class of board, you need to prefix the class with a dot. You can even write more complex selectors, like adding an h2 tag inside the element that has the class board like <code>cy.get(\u2018.board &gt; h2\u2019)<\/code>. The options are endless. If you have ever worked with CSS, you know that you can pretty much target any element you like.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-locating-elements-by-text\">Locating elements by text<\/h2>\n\n\n\n<p>Another strategy that we have in Cypress is selecting elements by text. This approach may not always work, but in cases like a login, sign up, sent, or okay button, these usually need to have specific text. To select an element using text, we use the contains command. The contains command will only select one element, and it&#8217;s actually going to look for elements within some context.<\/p>\n\n\n\n<p>The example uses two different texts to search: <code>cy.contains(\u2018My Shopping\u2019)<\/code> and <code>cy.contains(\u2018My\u2019)<\/code>. On the Trello board page, \u2018My Shopping\u2019 appears once and \u2018My\u2019 appears twice. The contains call using \u2018My\u2019 will return with the first element that has the text \u2018My\u2019 on the page, which is \u2018My Board\u2019 in the example. So that&#8217;s something to watch out for. If you want to be more specific with the kind of element you want to select, you can actually combine these two approaches, selecting a CSS element and specifying the text which you want to find. For example, <code>cy.contains(\u2018.board\u2019, \u2018My\u2019)<\/code> would return the correct element.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">  cy.contains('My Shopping') \/\/ text\n  cy.contains('My') \/\/ find the first one\n  cy.contains('.board', 'My') \/\/ specify element to find<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-locating-elements-using-xpath\">Locating elements using XPath<\/h2>\n\n\n\n<p>There are other selector strategies like using XPath. Cypress has an official plugin for XPath. If you install that, you will get the ability to select elements using XPath. You can use XPaths, but they may be harder to read. For example, <code>cy.xpath(\u2018(\/\/div[contains(@class, \u201cboard\u201d)])[1]\u2019)<\/code> does the same thing as <code>cy.get(\u2018board\u2019).eq(0)<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">\/\/ Filter an element by index\ncy.xpath('(\/\/div(contains(@class, \"board\") ]) [1]')\n\n\/\/ Select an element containing a specific child element\ncy.xpath('\/\/div [contains(@class, \"list\")] [.\/\/div[contains(@class, \"card\")]]')\n\n\/\/ Select an element by text\ncy.xpath('\/\/*[text()[contains(., \"My Boards\")]]')\n\n\/\/ Select an element after a specific element\ncy.xpath('\/\/div[contains(@class, \"card\")][preceding::div[contains(., \"milk\")]]')<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">\/\/Filter an element by index\ncy.get('.board').eq(0)\n\n\/\/ Select an element containing a specific child element\ncy.get(\".card\").parents('.list')\n\n\/\/ Select an element by text\ncy.contains('My Boards')\n\n\/\/ Select an element after a specific element\ncy.contains('.card', 'milk').next('.card')<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>Filip\u2019s recommendation is that you don\u2019t really need XPaths. XPaths can be really powerful in traversing the DOM structure and selecting different elements, but there are other options in Cypress.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-traversing-elements-in-cypress\">Traversing elements in Cypress<\/h2>\n\n\n\n<p>For our example, we have a Trello app and two lists with item cards. The first list has two cards, and the second has one card. We want to select each of the cards from a list. We can find the last card by doing a pair of commands <code>cy.get(\u2018[data-cy=card]\u2019).last()<\/code>. First, we\u2019re using the get command to target the cards, which will return all three cards. When you hover over your get command, you&#8217;ll see that all three cards are selected.<\/p>\n\n\n\n<p>When you use the last command, it&#8217;s going to filter to the last card, on which you can then do some action like click or make an assertion.<\/p>\n\n\n\n<p>You can also traverse up or down using Cypress. The next example <code>cy.contains(\u2018[data-cy=card]\u2019, \u2018Soap\u2019).parents(\u2018[data-cy-list]\u2019)<\/code> tries to target a parent element using text to select the card and then looks for a parent element using a CSS selector. This example is going to select our whole list.<\/p>\n\n\n\n<p>Alternatively, if you want to traverse between the next element or a previous element, that can be done easily with <code>cy.contains(\u2018[data-cy=card]\u2019, Milk\u2019).next()<\/code> or <code>cy.contains(\u2018[data-cy=card]\u2019, Milk\u2019).prev()<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">it.only('Find an element on page', () =&gt; {\n\n  cy.visit('\/board\/1')\n\n  \/\/ find last card\n  cy.get('[data-cy=card]')\n    .last()\n\n  \/\/ find parent element\n  cy.contains('[data-cy=card]', 'Soap')\n    .parents('[data-cy=list]')\n\n  \/\/ find next element\n  cy.contains('[data-cy=card]', 'Milk')\n    .next()\n\n  \/\/ find next element\n  cy.contains('[data-cy=card]', 'Bread')\n    .prev()\n\n});<\/code><\/pre>\n\n\n\n<p>You may sometimes deal with tricky situations like elements loading in at different times. The DOM is going to be flaky, because DOM is pretty much always flaky, right? Things get loaded, things get re-rendered, and so on. There was a Cypress 12 update that makes sure that when we are selecting an element and we have an assertion about that element, if the assertion does not pass, we are going to re-query our DOM. So in the background, these should command this assertion and our querying is interconnected.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">it('Dealing with flaky situations', () =&gt; {\n\n  cardsLoadRandomly(10000)\n\n  cy.visit('\/board\/1')\n\n  cy.get('[data-cy=card]')\n    .last()\n    .should('contain.text', 'Soap')\n\n});<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-locating-elements-in-a-shadow-dom\">Locating elements in a shadow DOM<\/h2>\n\n\n\n<p>Dealing with shadows DOM can be tricky. By default, Cypress is not going to look for shadow DOM elements, only DOM elements. If we want to include the shadow DOM elements, we have a few options in Cypress.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">it('closes side panel that is in shadow DOM', () =&gt; {\n\n  cy.visit('https:\/\/lit.dev\/playground\/#sample=docs%2Fwhat-is-lit&amp;view-mode=preview')\n\n  cy.get('litdev-drawer', { includeShadowDom: true })\n    .find('#openCloseButton', { includeShadowDom: true })\n    .click()\n\n});<\/code><\/pre>\n\n\n\n<p>If we don&#8217;t have too many of these shadow DOM elements on the page, we can use either of two commands that do essentially the same thing:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>cy.get(\u2018litdev-drawer\u2019, { includeShadowDom: true }). find(\u2018#openCloseButton\u2019, { includeShadowDom: true })<\/code><\/li>\n\n\n\n<li><code>cy.get(\u2018litdev-drawer\u2019).shadow().find(\u2018#openCloseButton\u2019)<\/code><\/li>\n<\/ul>\n\n\n\n<p>Alternatively, if we have a lot of shadow elements in our application, we can use the approach of changing the option in the config file includeShadowDom from false to true. By default it is set to false, but if you set it to true and save your configuration, Cypress will look for shadow DOM elements automatically.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-locating-elements-within-an-iframe\">Locating elements within an iframe<\/h2>\n\n\n\n<p>Cypress does not have an iframe command. Whenever we traverse, we interact with this timeline that we have in Cypress to see the state of our application as it was during the execution of that command. In order to support the iframes, Cypress would have to do the snapshot of the iframe as well. Essentially, if you want to access an iframe using Cypress, you write a Cypress promise that will resolve the contents of the iframe.<\/p>\n\n\n\n<p>You can add a custom command to your code base to retry the iframe. So if the iframe takes a little bit of time to appear, it&#8217;ll resolve when it appears or when the timeout eventually times out. Another way of dealing with that is installing a plugin.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">it('dealing with iframes', () =&gt; {\n\n  cy.visit('https:\/\/kitchen.applitools.com\/ingredients\/iframe')\n\n  cy.iframe('#the-kitchen-table')\n    .find('section')\n    .should('contain.text', 'The Kitchen')\n\n});<\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-cypress-selector-recommendations\">Cypress selector recommendations<\/h2>\n\n\n\n<p>Cypress works best when you have your test code along with the source code in the same repository. These are the recommendations that Cypress gives in the documentation:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Selector<\/th><th>Recommendation<\/th><\/tr><\/thead><tbody><tr><td>Generic HTML tags, elements, or classes like:<br><code>cy.get(\u2018button\u2019)<br>cy.get(\u2018.btn.btn-large\u2019)<\/code><\/td><td><strong>Never recommended.<\/strong><br>Lack content or are often paired with styling and therefore highly subject to change.<\/td><\/tr><tr><td>IDs, HTML name attributes, or title attributes like:<br><code>cy.get(\u2018$main\u2019)<br>cy.get(\u2018[name=\u201dsubmission\u201d]\u2019)<\/code><\/td><td><strong>Sparingly recommended.<\/strong><br>Still coupled to style or JS event listeners, or coupled to the name attribute, which has HTML semantics.<\/td><\/tr><tr><td>Text attributes like:<br><code>cy.contains(\u2018Submit\u2019)<\/code><\/td><td><strong>Recommendation depends.<\/strong><br>This is only suggested for elements where text is not expected to change.<\/td><\/tr><tr><td>Custom IDs or data test attributes like:<br><code>cy.get(\u2018[data-cy=\u201dsubmit\u201d]\u2019)<\/code><\/td><td><strong>Always recommended.<\/strong><br>Isolated from all changes.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>The best recommendation is to create custom IDs for elements. As you create your test, you will create those IDs as well. So if you need a test, create an attribute, and that will do a single job, be available for end-to-end test.<\/p>\n\n\n\n<p>Filip recommends two blog posts about selector strategies:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/css-tricks.com\/front-end-test-element-locators\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Writing Strong Front-end Test Element Locators by Mark Noonan<\/span><\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/filiphric.com\/how-to-structure-a-big-project-in-cypress\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">How to structure a big project in Cypress by Filip Hric<\/span><\/strong><\/a><\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-adding-visual-testing\">Adding visual testing<\/h2>\n\n\n\n<p>We can go beyond accessibility and functional tests and we can add visual tests into our test suite. We can do this with Applitools. Create a free Applitools account to access your API key, and follow our <a href=\"https:\/\/app14743.cloudwayssites.com\/tutorials\/quickstart\/web\/cypress\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">tutorial for testing web apps in JavaScript using Cypress<\/span><\/strong><\/a>.<\/p>\n\n\n\n<p><strong><em>Note<\/em><\/strong><em>: Do not share your API key with others. For this demo, Filip rotated his API key, so it&#8217;s no longer valid.<\/em><\/p>\n\n\n\n<p>The visual testing will have three basic parts:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your \u201ceyes\u201d.<\/li>\n\n\n\n<li>Check the window.<\/li>\n\n\n\n<li>Close your \u201ceyes\u201d.<\/li>\n<\/ol>\n\n\n\n<p>Applitools Eyes will then validate the snapshot it takes against the current baseline. But sometimes we don\u2019t want to test certain areas of the page like dynamic data. Applitools is really intelligent about that and has options in the Test Manager to add ignore regions, but we can help it with our own ignore regions by using selectors.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">it('check home screen', () =&gt; {\n\n  cy.eyesOpen({\n    appName: 'Trello',\n  })\n\n  cy.visit('\/')\n\n  cy.get('[data-cy=board-item]')\n    .should('be.visible')\n\n  cy.eyesCheckWindow({\n    ignore: {\n      selector: 'hide-in-applitools'\n    }\n  })\n\n  cy.eyesClose()\n\n});<\/code><\/pre>\n\n\n\n<p>In the example, we are showing the ignore region and telling which selector it should ignore. You can create a custom hide-in-applitools class to add to all your elements you want to hide, and Applitools will automatically ignore them.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-cypress-selectors-q-amp-a\">Cypress selectors Q&amp;A<\/h2>\n\n\n\n<p>After Filip shared his Cypress demonstration, we turned it over to our Q&amp;A, where Filip responded to questions from the audience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-cypress-commands\">Using Cypress commands<\/h3>\n\n\n\n<p><strong>Question<\/strong>: I was recently working on XPaths and Cypress. I understand cypress-xpath is deprecated and I was suggested to use @cypress\/xpath. Is that the case?<br><strong>Filip\u2019s response<\/strong>: I don&#8217;t know. I know this was the situation for the Cypress grab package, which can grab your test so you can just run a subset of your Cypress test. It was a standalone plugin and then they sort of moved it inside a Cypress repository. So now it&#8217;s @cypress\/grab. I believe the situation with Xpath might be similar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-using-the-react-testing-library\">Using the React testing library<\/h2>\n\n\n\n<p><strong>Question<\/strong>: What are your thoughts about using the React testing library plugin for locating elements in Cypress using their accessibility roles and names \u2013 findByRole, findByLabel?<br><strong>Filip\u2019s response<\/strong>: [To clarify the specific library mentioned] there&#8217;s this testing library, which is a huge project and has different subprojects. One is the React testing library and their Cypress testing library, and they basically have those commands inside this (findByRole, findByPlaceholder, etc.). So I think the Cypress testing library is just an implementation of the thing you are mentioning. So what&#8217;s my opinion on that? I&#8217;m a fan. Like I said, I&#8217;m not using it right now, but it does two things at once. You can check your functionality as well as accessibility. So if your test fails, it might be annoying, but it also might mean you need to work on the accessibility of the app. So I recommend it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-using-div-board-or-board\">Using div.board or .board<\/h2>\n\n\n\n<p><strong>Question<\/strong>: Do you have a stance\/opinion on div.board versus .board for CSS selectors?<br><strong>Filip\u2019s response<\/strong>: Not really. As I mentioned, I prefer adding my own custom selectors, so I don&#8217;t think I would have this dilemma too often.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tracking-api-call-execution\">Tracking API call execution<\/h2>\n\n\n\n<p><strong>Question<\/strong>: How can we find out if an API call has executed when we click on an element?<br><strong>Filip\u2019s response<\/strong>: In Cypress, it&#8217;s really easy. There&#8217;s this cy.intercept command in which you can define the URL or the method or any kind of details about the API call. And you need to make sure that you put the cy.intercept command before the click happens. So if the click triggers that API call you can then use cy.wait and basically refer through alias to that API call. I suggest you take a look into the intercept command in Cypress docs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-working-with-iframes\">Working with iframes<\/h2>\n\n\n\n<p><strong>Question<\/strong>: Is it possible to select elements from an iframe and work with an iframe like normal?<\/p>\n\n\n\n<p><strong>Filip\u2019s response<\/strong>:&nbsp;Well, I don&#8217;t see why not. It is a little bit tricky. Iframe is just another location, so it&#8217;ll always have a source pointing to a URL. So, alternatively, if you are going to do a lot of testing within that iframe, maybe you just want to open that and test the page that is being iframed. It would be a good thing to consult with developers to see if there&#8217;s a communication between the iframe and the parent frame and if there&#8217;s anything specific that needs to be covered. But if you do like a lot of heavy testing, I would maybe suggest to open the URL that the iframe opens and test that.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-learn-more\">Learn more<\/h2>\n\n\n\n<p>So that covers our expert\u2019s takeaways on locating web elements using Cypress. If you want to watch the demos, you can access the <a href=\"https:\/\/app14743.cloudwayssites.com\/event\/selectors-locators-cypress-webdriverio-webinar\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">on-demand webinar recording<\/span><\/strong><\/a>.<\/p>\n\n\n\n<p>If you want to learn more about any of these tools, frameworks like Cypress, WebDriverIO, or specifically <a href=\"https:\/\/testautomationu.applitools.com\/web-element-locator-strategies\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">web element locator strategies<\/span><\/strong><\/a>, be sure to check out <a href=\"http:\/\/testautomationu.applitools.com\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Test Automation University<\/span><\/strong><\/a>. All the courses and content are free.<br>Be sure to register for the <a href=\"https:\/\/app14743.cloudwayssites.com\/resources\/webinars\/test-maintainability-robot-framework-selenium\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">upcoming Let the Engineers Speak webinar series installment on Test Maintainability<\/span><\/strong><\/a> coming in May. Engineers Maaret Pyh\u00e4j\u00e4rvi from Selenium and Ed Manlove from Robot Framework will be discussing test maintenance and test maintainability with a live Q&amp;A.<\/p>\n\n\n<section class=\"article-group\">\n    <div class=\"is-featured\">\n      <div class=\"title-bar\">\n      <div><\/div>\n    <\/div>      <div class=\"row\">\n        <div class=\"col-md-6\">\n          \t<div class=\"item is-primary\">\n\t\t<a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/let-the-engineers-speak-part-5-audience-qa\/\" >\n\t\t\t\t\t\t\t<picture class=\"image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<source srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/12\/Title-831x540.jpg\" media=\"screen and (min-width: 768px)\" \/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/12\/Title-384x242.jpg\" width=\"384\" height=\"242\" alt=\"\" loading=\"lazy\">\n\t\t\t\t<\/picture>\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t<h3 class=\"title\">Let the Engineers Speak! Part 5: Audience Q&#038;A<\/h3>\n\t\t\t\t\t\t\t\t\t<div class=\"meta\">\n\t\t\t\t\t\tArticles &mdash; 01.11.2023\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/a>\n\t<\/div>\n        <\/div>\n        <div class=\"col-md-6\">\n          \t<div class=\"item is-secondary\">\n\t\t<a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/let-the-engineers-speak-part-4-changing-frameworks\/\" >\n\t\t\t\t\t\t\t<picture class=\"image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/12\/Title-200x200.jpg\" width=\"200\" height=\"200\" alt=\"\" loading=\"lazy\">\n\t\t\t\t<\/picture>\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t<h3 class=\"title\">Let the Engineers Speak! Part 4: Changing Frameworks<\/h3>\n\t\t\t\t\t\t\t\t\t<div class=\"meta\">\n\t\t\t\t\t\tArticles &mdash; 01.05.2023\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/a>\n\t<\/div>\n\t<div class=\"item is-secondary\">\n\t\t<a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/let-the-engineers-speak-part-3-favorite-test-integrations\/\" >\n\t\t\t\t\t\t\t<picture class=\"image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/12\/Title-200x200.jpg\" width=\"200\" height=\"200\" alt=\"\" loading=\"lazy\">\n\t\t\t\t<\/picture>\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t<h3 class=\"title\">Let the Engineers Speak! Part 3: Favorite Test Integrations<\/h3>\n\t\t\t\t\t\t\t\t\t<div class=\"meta\">\n\t\t\t\t\t\tArticles &mdash; 12.28.2022\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/a>\n\t<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <\/section><\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-none pb-none\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-quick-answers\">Quick Answers<\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1731025092682\"><strong class=\"schema-faq-question\">What are the primary ways to locate elements in Cypress?<\/strong> <p class=\"schema-faq-answer\">Cypress allows you to locate elements using CSS selectors, text-based selectors with the\u00a0<code>contains<\/code>\u00a0command, and by attributes like class, ID, or custom data attributes. You can also use XPath with the help of a plugin, though CSS selectors are generally recommended for simplicity.<br\/><\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1737126941213\"><strong class=\"schema-faq-question\">How can I use custom attributes in element selection?<\/strong> <p class=\"schema-faq-answer\">Custom attributes, such as\u00a0<code>data-cy<\/code>, are highly recommended for end-to-end tests as they provide unique and stable identifiers for elements. To use them in Cypress, you can write commands like\u00a0<code>cy.get('[data-cy=element]')<\/code>\u00a0to reliably locate elements.<br\/><\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1737126962429\"><strong class=\"schema-faq-question\">When should I use the\u00a0<code>contains<\/code>\u00a0command in Cypress?<\/strong> <p class=\"schema-faq-answer\">The\u00a0<code>contains<\/code>\u00a0command is ideal for locating elements based on text content. It\u2019s particularly useful for buttons, labels, or other elements where text is a reliable identifier. For example,\u00a0<code>cy.contains('Submit')<\/code>\u00a0will select a button with the text &#8220;Submit&#8221;. You can also combine selectors with text for greater specificity, like\u00a0<code>cy.contains('.className', 'Submit')<\/code>.<br\/><\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1737126982546\"><strong class=\"schema-faq-question\">Is XPath a good choice for locating elements in Cypress?<\/strong> <p class=\"schema-faq-answer\">While XPath can be a powerful tool for traversing complex DOM structures, it\u2019s often harder to read and maintain compared to CSS selectors. Cypress recommends using their official XPath plugin when needed, but advises relying on CSS selectors or custom attributes for most use cases.<br\/><\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1737127034047\"><strong class=\"schema-faq-question\">What can I do if elements are inside a shadow DOM?<\/strong> <p class=\"schema-faq-answer\">By default, Cypress doesn\u2019t look inside shadow DOMs. To include shadow DOM elements in your tests, you can use the\u00a0<code>includeShadowDom<\/code>\u00a0option with the\u00a0<code>get<\/code>\u00a0command or explicitly use the\u00a0<code>.shadow()<\/code>\u00a0method to traverse shadow roots. Alternatively, you can configure your tests globally to always include shadow DOM elements.<br\/><\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1737127055313\"><strong class=\"schema-faq-question\">How should I handle iframe elements in Cypress?<\/strong> <p class=\"schema-faq-answer\">Cypress does not natively support interacting with iframe elements. You\u2019ll need to resolve the iframe\u2019s contents using a custom Cypress command or a third-party plugin. This usually involves waiting for the iframe to load and then selecting elements within its document.<br\/><\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1737127074330\"><strong class=\"schema-faq-question\">What is the best way to deal with flaky DOM behaviors in tests?<\/strong> <p class=\"schema-faq-answer\">Cypress provides automatic retries for commands and assertions, ensuring they wait for elements to exist or pass conditions. Using custom attributes for selectors and designing robust test strategies, such as avoiding dynamically changing elements where possible, further minimizes flakiness.<br\/><\/p> <\/div> <\/div>\n\n\n\n<div class=\"wp-block-group pb-none pt-none\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<style>\n.schema-faq-section { \n  background: white;\n  margin: 1rem 0;\n  border: 2px solid rgba(0, 0, 0, 0.13);\n  border-radius: 10px;\n  box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.03);\n}\n.schema-faq-question{\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  transition: opacity ease 0.25s;\n  padding: 1rem;\n  color: var(--wp--preset--color--primary);\n  font-size: var(--wp--preset--font-size-large);\n}\n.schema-faq-question:hover {\n  color: var(--wp--preset--color--secondary);\n}\n.schema-faq-question:after{\n  width: 16px;\n  height: 20px;\n  display: inline-block;\n  margin-left: auto;\n  margin-right: 5px;\n  vertical-align: top;\n  color: inherit;\n  content: \"+\";\n}\n.schema-faq-question.expanded:after{\n  content: \"-\";\n}\n.schema-faq-question:hover{\n  opacity: 0.75;\n}\n.schema-faq-answer{\n  padding: 0 1rem 1rem 1rem;\n  display: none;\n}\n.schema-faq-answer.default{\n  display: block;\n}\n.editor-styles-wrapper .schema-faq-question {\n  cursor: text;\n}\n.editor-styles-wrapper .schema-faq-answer {\n  display: block; \n}\n<\/style>\n\n\n\n<script>\njQuery(function($){var yoast={accordion:function(){var isAnimating=!1;$(\".schema-faq-section\").find(\".schema-faq-question\").click(function(event){event.stopPropagation();if(isAnimating)return;isAnimating=!0;var answer=$(this).nextAll(\".schema-faq-answer\").eq(0);answer.slideToggle(250,function(){$(this).toggleClass(\"expanded\");$(this).prev(\".schema-faq-question\").toggleClass(\"expanded\");isAnimating=!1});$(\".schema-faq-answer\").not(answer).slideUp(\"fast\",function(){$(this).removeClass(\"expanded\");$(this).prev(\".schema-faq-question\").removeClass(\"expanded\")})})}};yoast.accordion()});\n<\/script>\n<\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Applitools hosted a webinar,&nbsp;Let the Engineers Speak: Selectors, where testing experts discussed one of the most common pain points that pretty much anyone who\u2019s ever done web UI testing has&#8230;<\/p>\n","protected":false},"author":89,"featured_media":48944,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12271],"tags":[10357,16882,16881,16883],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.5 (Yoast SEO v24.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using Web Selectors in Cypress<\/title>\n<meta name=\"description\" content=\"Andy Knight recaps testing expert Filip Hric&#039;s demo and discussions about locating web elements using selectors in Cypress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Let the Engineers Speak: Selectors in Cypress\" \/>\n<meta property=\"og:description\" content=\"Applitools hosted a webinar,&nbsp;Let the Engineers Speak: Selectors, where testing experts discussed one of the most common pain points that pretty much\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-07T23:11:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T15:19:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/03\/blog_selectors-in-cypress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"831\" \/>\n\t<meta property=\"og:image:height\" content=\"542\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andrew Knight\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Knight\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/\"},\"author\":{\"name\":\"Andrew Knight\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/a8038d2c9ccd3531090422b6172b125b\"},\"headline\":\"Let the Engineers Speak: Selectors in Cypress\",\"datePublished\":\"2023-04-07T23:11:34+00:00\",\"dateModified\":\"2025-01-17T15:19:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/\"},\"wordCount\":2628,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/03\/blog_selectors-in-cypress.jpg\",\"keywords\":[\"Cypress\",\"locators\",\"selectors\",\"web elements\"],\"articleSection\":[\"Getting Started\"],\"inLanguage\":\"en-US\"},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/\",\"name\":\"Using Web Selectors in Cypress\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/03\/blog_selectors-in-cypress.jpg\",\"datePublished\":\"2023-04-07T23:11:34+00:00\",\"dateModified\":\"2025-01-17T15:19:05+00:00\",\"description\":\"Andy Knight recaps testing expert Filip Hric's demo and discussions about locating web elements using selectors in Cypress.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1731025092682\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126941213\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126962429\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126982546\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127034047\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127055313\"},{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127074330\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/03\/blog_selectors-in-cypress.jpg\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/03\/blog_selectors-in-cypress.jpg\",\"width\":831,\"height\":542,\"caption\":\"Filip Hric from Cypress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/blog\/category\/getting-started\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Let the Engineers Speak: Selectors in Cypress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"name\":\"Applitools Visual AI\",\"description\":\"Applitools delivers full end-to-end test automation with AI infused at every step.\",\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\",\"name\":\"Applitools\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"width\":156,\"height\":28,\"caption\":\"Applitools\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/a8038d2c9ccd3531090422b6172b125b\",\"name\":\"Andrew Knight\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g\",\"caption\":\"Andrew Knight\"},\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/andyknight\/\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1731025092682\",\"position\":1,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1731025092682\",\"name\":\"What are the primary ways to locate elements in Cypress?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Cypress allows you to locate elements using CSS selectors, text-based selectors with the\u00a0contains\u00a0command, and by attributes like class, ID, or custom data attributes. You can also use XPath with the help of a plugin, though CSS selectors are generally recommended for simplicity.<br\/>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126941213\",\"position\":2,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126941213\",\"name\":\"How can I use custom attributes in element selection?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Custom attributes, such as\u00a0data-cy, are highly recommended for end-to-end tests as they provide unique and stable identifiers for elements. To use them in Cypress, you can write commands like\u00a0cy.get('[data-cy=element]')\u00a0to reliably locate elements.<br\/>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126962429\",\"position\":3,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126962429\",\"name\":\"When should I use the\u00a0contains\u00a0command in Cypress?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The\u00a0contains\u00a0command is ideal for locating elements based on text content. It\u2019s particularly useful for buttons, labels, or other elements where text is a reliable identifier. For example,\u00a0cy.contains('Submit')\u00a0will select a button with the text \\\"Submit\\\". You can also combine selectors with text for greater specificity, like\u00a0cy.contains('.className', 'Submit').<br\/>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126982546\",\"position\":4,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126982546\",\"name\":\"Is XPath a good choice for locating elements in Cypress?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"While XPath can be a powerful tool for traversing complex DOM structures, it\u2019s often harder to read and maintain compared to CSS selectors. Cypress recommends using their official XPath plugin when needed, but advises relying on CSS selectors or custom attributes for most use cases.<br\/>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127034047\",\"position\":5,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127034047\",\"name\":\"What can I do if elements are inside a shadow DOM?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"By default, Cypress doesn\u2019t look inside shadow DOMs. To include shadow DOM elements in your tests, you can use the\u00a0includeShadowDom\u00a0option with the\u00a0get\u00a0command or explicitly use the\u00a0.shadow()\u00a0method to traverse shadow roots. Alternatively, you can configure your tests globally to always include shadow DOM elements.<br\/>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127055313\",\"position\":6,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127055313\",\"name\":\"How should I handle iframe elements in Cypress?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Cypress does not natively support interacting with iframe elements. You\u2019ll need to resolve the iframe\u2019s contents using a custom Cypress command or a third-party plugin. This usually involves waiting for the iframe to load and then selecting elements within its document.<br\/>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127074330\",\"position\":7,\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127074330\",\"name\":\"What is the best way to deal with flaky DOM behaviors in tests?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Cypress provides automatic retries for commands and assertions, ensuring they wait for elements to exist or pass conditions. Using custom attributes for selectors and designing robust test strategies, such as avoiding dynamically changing elements where possible, further minimizes flakiness.<br\/>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using Web Selectors in Cypress","description":"Andy Knight recaps testing expert Filip Hric's demo and discussions about locating web elements using selectors in Cypress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/","og_locale":"en_US","og_type":"article","og_title":"Let the Engineers Speak: Selectors in Cypress","og_description":"Applitools hosted a webinar,&nbsp;Let the Engineers Speak: Selectors, where testing experts discussed one of the most common pain points that pretty much","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2023-04-07T23:11:34+00:00","article_modified_time":"2025-01-17T15:19:05+00:00","og_image":[{"width":831,"height":542,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/03\/blog_selectors-in-cypress.jpg","type":"image\/jpeg"}],"author":"Andrew Knight","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Andrew Knight","Est. reading time":"23 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/"},"author":{"name":"Andrew Knight","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/a8038d2c9ccd3531090422b6172b125b"},"headline":"Let the Engineers Speak: Selectors in Cypress","datePublished":"2023-04-07T23:11:34+00:00","dateModified":"2025-01-17T15:19:05+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/"},"wordCount":2628,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/03\/blog_selectors-in-cypress.jpg","keywords":["Cypress","locators","selectors","web elements"],"articleSection":["Getting Started"],"inLanguage":"en-US"},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/","name":"Using Web Selectors in Cypress","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/03\/blog_selectors-in-cypress.jpg","datePublished":"2023-04-07T23:11:34+00:00","dateModified":"2025-01-17T15:19:05+00:00","description":"Andy Knight recaps testing expert Filip Hric's demo and discussions about locating web elements using selectors in Cypress.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1731025092682"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126941213"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126962429"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126982546"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127034047"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127055313"},{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127074330"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/03\/blog_selectors-in-cypress.jpg","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/03\/blog_selectors-in-cypress.jpg","width":831,"height":542,"caption":"Filip Hric from Cypress"},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/app14743.cloudwayssites.com\/"},{"@type":"ListItem","position":2,"name":"Getting Started","item":"https:\/\/app14743.cloudwayssites.com\/blog\/category\/getting-started\/"},{"@type":"ListItem","position":3,"name":"Let the Engineers Speak: Selectors in Cypress"}]},{"@type":"WebSite","@id":"https:\/\/app14743.cloudwayssites.com\/#website","url":"https:\/\/app14743.cloudwayssites.com\/","name":"Applitools Visual AI","description":"Applitools delivers full end-to-end test automation with AI infused at every step.","publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/app14743.cloudwayssites.com\/#organization","name":"Applitools","url":"https:\/\/app14743.cloudwayssites.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","width":156,"height":28,"caption":"Applitools"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/a8038d2c9ccd3531090422b6172b125b","name":"Andrew Knight","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g","caption":"Andrew Knight"},"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/andyknight\/"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1731025092682","position":1,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1731025092682","name":"What are the primary ways to locate elements in Cypress?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Cypress allows you to locate elements using CSS selectors, text-based selectors with the\u00a0contains\u00a0command, and by attributes like class, ID, or custom data attributes. You can also use XPath with the help of a plugin, though CSS selectors are generally recommended for simplicity.<br\/>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126941213","position":2,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126941213","name":"How can I use custom attributes in element selection?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Custom attributes, such as\u00a0data-cy, are highly recommended for end-to-end tests as they provide unique and stable identifiers for elements. To use them in Cypress, you can write commands like\u00a0cy.get('[data-cy=element]')\u00a0to reliably locate elements.<br\/>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126962429","position":3,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126962429","name":"When should I use the\u00a0contains\u00a0command in Cypress?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"The\u00a0contains\u00a0command is ideal for locating elements based on text content. It\u2019s particularly useful for buttons, labels, or other elements where text is a reliable identifier. For example,\u00a0cy.contains('Submit')\u00a0will select a button with the text \"Submit\". You can also combine selectors with text for greater specificity, like\u00a0cy.contains('.className', 'Submit').<br\/>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126982546","position":4,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737126982546","name":"Is XPath a good choice for locating elements in Cypress?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"While XPath can be a powerful tool for traversing complex DOM structures, it\u2019s often harder to read and maintain compared to CSS selectors. Cypress recommends using their official XPath plugin when needed, but advises relying on CSS selectors or custom attributes for most use cases.<br\/>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127034047","position":5,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127034047","name":"What can I do if elements are inside a shadow DOM?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"By default, Cypress doesn\u2019t look inside shadow DOMs. To include shadow DOM elements in your tests, you can use the\u00a0includeShadowDom\u00a0option with the\u00a0get\u00a0command or explicitly use the\u00a0.shadow()\u00a0method to traverse shadow roots. Alternatively, you can configure your tests globally to always include shadow DOM elements.<br\/>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127055313","position":6,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127055313","name":"How should I handle iframe elements in Cypress?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Cypress does not natively support interacting with iframe elements. You\u2019ll need to resolve the iframe\u2019s contents using a custom Cypress command or a third-party plugin. This usually involves waiting for the iframe to load and then selecting elements within its document.<br\/>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127074330","position":7,"url":"https:\/\/app14743.cloudwayssites.com\/blog\/using-web-selectors-in-cypress\/#faq-question-1737127074330","name":"What is the best way to deal with flaky DOM behaviors in tests?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Cypress provides automatic retries for commands and assertions, ensuring they wait for elements to exist or pass conditions. Using custom attributes for selectors and designing robust test strategies, such as avoiding dynamically changing elements where possible, further minimizes flakiness.<br\/>","inLanguage":"en-US"},"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/48916"}],"collection":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/users\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=48916"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/48916\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/48944"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=48916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=48916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=48916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}