@helpscout/cyan

--- id: traversing title: Traversing sidebar_label: Traversing hide_title: true --- # Traversing Targeting DOM Elements from the main DOM element collection defined by a [query](./queries.md) method like `cy.get()`. Cyan's traversal methods were designed to emulate [Cypress's commands](https://docs.cypress.io/api/api/table-of-contents.html). Cyan's traversal methods are **chainable** (similar to [jQuery](https://api.jquery.com/category/traversing/)). #### Example ```js test('Can render nested non-active item links', () => { // Rendering a sample list component. cy.render(<SomeListComponent activeIndex={3} />) // Using Cyan's travesal methods, we'll: // 1. Find all of the <a> Elements from our <ul> component // 2. Filter out the active item // 3. Find the first Element const el = cy .get('ul > li a') .not('.active') .first() // Assert against the first Element expect(el.attr('data-index')).toEqual('0') }) ``` ## children `Function(): Cyan instance` Get the children DOM elements from the main DOM element. #### Example ```javascript cy.get('ul').children() ``` ## closest `Function(selector: string): Cyan instance` Get the first closest DOM element with a matching selector from the main DOM element. #### Parameters - `selector` `{string}` A selector used to find a matching DOM element. #### Example ```javascript cy.get('div').closest('main') ``` ## each `Function(callback: Function<Element>): Cyan instance` Iterate through the main DOM elements. #### Parameters - `callback` `{Function<Element>}` A callback invoked with the iterating DOM elements. #### Example ```javascript cy.get('div').each((node, index) => { node.classList.add(`item-${index}`) }) ``` ## eq `Function(index: number): Cyan instance` Get a DOM element based on it's index number. #### Parameters - `index` `{number}` A number indicating the index of the element to get. #### Example ```javascript cy.get('ul > li').eq(2) ``` ## filter `Function(selector: string): Cyan instance` Get the DOM elements that match a specific selector. #### Parameters - `selector` `{string}` A selector used for filter matching. #### Example ```javascript cy.get('ul > li').filter('.item') ``` ## find `Function(selector: string): Cyan instance` Get descendent DOM elements that match a specific selector. #### Parameters - `selector` `{string}` A selector used for descendent matching. #### Example ```javascript cy.get('ul').find('li.item') ``` ## findByCy `Function(selector: string): Cyan instance` Get descendent DOM elements that match a specific `data-cy` selector. #### Parameters - `selector` `{string}` A selector used for descendent matching. #### Example ```javascript cy.get('ul').findByCy('Item') ``` ## first Get the first DOM element from the main DOM elements. #### Example ```javascript cy.get('ul > li').first() ``` ## last Get the last DOM element from the main DOM elements. #### Example ```javascript cy.get('ul > li').last() ``` ## next Get the next sibling DOM element from the main DOM element. #### Example ```javascript cy.get('ul > li') .eq(3) .next() ``` ## not `Function(selector: string): Cyan instance` Filter DOM elements from the main DOM elements. #### Parameters - `selector` `{string}` A selector used for filter matching. #### Example ```javascript cy.get('ul > li').not('.item') ``` ## parent Get the parent DOM element from the main DOM element. #### Example ```javascript cy.get('li').parent() ``` ## prev Get the previous sibling DOM element from the main DOM element. #### Example ```javascript cy.get('ul > li') .eq(3) .prev() ``` ## See Also - [Queries](./queries.md) - [Getters](./getters.md) - [Assertions](./assertions.md)