How to click a div with certain text in a nested div using cypress? - css

Below is my HTML code :
<div class="main">
<div class="box">
<div class="cell">checkbox</div>
<div class="cell"></div>
<div class="cell">
<a>link1</a>
</div>
<div class="cell">type</div>
<div class="cell">description</div>
</div>
<div class="box"> //i want to click this element
<div class="cell">checkbox</div>
<div class="cell"></div>
<div class="cell">
<a>link2</a>
</div>
<div class="cell">type1</div>
<div class="cell">description1</div>
</div>
<div class="box">
<div class="cell">checkbox</div>
<div class="cell"></div>
<div class="cell">
<a>link3</a>
</div>
<div class="cell">type2</div>
<div class="cell">description2</div>
</div>
</div>
I'd like to click on the div with the class box containing the <a>link2</a> tag.
I have tried this :
cy.get(`.main>div`).contains('link2').click();
This clicks on the link element itself, but I'd like it to click the div element that contains it (the <a>link2</a> tag) instead.
Is there any way to do this?
I'm looking forward to any tips and solutions you might provide.
Thanks.


You could try getting the link2's parent element which is the div you want to click, in the following way:
cy.get(`.main>div`).contains('link2').parent().click();


I believe you can use a selector in 'contains' itself like below
cy.contains('.main>div', 'link2').click();

Related

Bootstrap 4 float property not working with SVG elements

How do I get my svg to float:right; and float:left; in the following codepen? I am using the float-right and float-left Bootstrap 4 utility classes. But it doesn't work on my <div> elements. I'm using D3.js to create two bar charts and place them side by side.
Thank you.
<div class="container">
<div class="row">
<div class="col-6" id="barchart"></div>
<div class="col-6 float-right" id="barchart2"></div>
</div>
<div class="row">
<div class="col-8"></div>
<div class="col-4"></div>
</div>
</div>

Instead of using float I used something similar to what Paulie_D suggested.
d-flex justify-content-end

You have added the float-right class to the parent element which is already applied the entire col-6.
You need to create a child div and apply the float-right and add your ids for the bar chart.
<div class="container">
<div class="row">
<div class="col-6">
<div class="float-left" id="barchart"></div>
</div>
<div class="col-6">
<div class="float-right" id="barchart2"></div>
</div>
</div>
</div>

CSS grid inside another CSS grid displaying like parent grid

I am trying to create a css grid inside another css grid look like it's parent grid. The size of the inner grid is smaller by 20 and 100 pixels but it won't align like the parent grid. Please check out the codepen. Thank you.
CODEPEN: https://codepen.io/centem/pen/oNvZLgP?editors=1100
<div class="grid-page">
<div class="header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-grid">
<div class="inner-header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="inner-menu">MENU</div>
<div class="inner-content">
CONTENT
</div>
<div class="inner-footer">FOOTER</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>

Replace the class inner-grid with the inner-grid-page. No CSS is defined for inner-grid class but I can see grids defined for inner-grid-page. Let me know if it works
<div class="grid-page">
<div class="header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-grid-page">
<div class="inner-header">
<div>HOME</div>
<div>SEARCH</div>
<div>LOGOUT</div>
</div>
<div class="inner-menu">MENU</div>
<div class="inner-content">
CONTENT
</div>
<div class="inner-footer">FOOTER</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>

Basic Bootstrap Layout Using Rows

I'm new with CSS. I want to do something simple like have a treeview on span the entire left of a page col-4 for example and several grids on the major portion of the page stacked vertical col-8 for example.
What I have below is pushing the tree the entire width of the page and only one grid is displaying and that is below the tree instead of to the right of it.
I'm not sure if maybe the dynatree or jqgrid CSS is messing this up or my bootstrap is wrong?
<body>
<div class="row">
<div class="col-sm-4" id="tree">
</div>
<div id="info"> </div>
<div class="col-sm-8">
<table id="grid"></table>
<table id="grid"></table>
</div>
</div>
</body>

in your case col-sm-8 will always fell down because of <div id="info"> </div> that is a block element without any float so it run like a bootstrap row.
Try to do this:
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" id="tree">
</div>
<div class="col-sm-8">
<table id="grid"></table>
<table id="grid"></table>
</div>
<div id="info"> </div>
</div>
</div>
</body>
or better (according o bootstrap):
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" id="tree">
</div>
<div class="col-sm-8">
<table id="grid"></table>
<table id="grid"></table>
</div>
</div>
<div class="row">
<div id="info"> </div>
</div>
</div>
</body>

As a test, I would remove
<div id="info"> </div>
Divs are block elements, which could be forcing the floated div to a new line.

Grids in box bootstrap

I'm trying to bulid grids like the photo below
IMG LINK: http://postimg.org/image/qo3b4nof1/
But i'm getting the DIV E in almost next to the D-DIV
here's my code
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="col-md-1">A</div><br/>
<div class="col-md-1">B</div><br/>
<div class="col-md-1">C</div>
</div>
<div class="col-md-11">D<br/>
<div class="col-md-1">E</div>
</div>
</div>
</div>
The break-lines i added because DIV-A and DIV-B become one piece without breaklines.
is it better to do it with table ?

You do not need to use container and row with bootstrap 3.*
I changed you code to match the provided screenshot, see this http://jsfiddle.net/Sd2zw/ .
I just use xs columns because the small screen of jsfiddle, you can replace it back by md :
<div>
<div class="col-xs-1">
<div class="col-xs-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<span class="clearfix"></span>
</div>
<div class="col-xs-11">
<div class="col-xs-12 d-container">D</div>
<div class="col-xs-12">
<div class="col-xs-1">E</div>
<span class="clearfix"></span>
</div>
</div>
<span class="clearfix"></span>
</div>
Also, use some clearfix tags to clear the float.

CSS3 div and last-child - how aright?

CODE:
<div class="AllDiv">
<div class="LeftDiv">
<div class="LeftDiv2"> </div>
<div class="Photo"></div>
</div>
<div class="News">
.....
</div>
</div>
<div class="AllDiv">
<div class="LeftDiv">
<div class="LeftDiv2"> </div>
<div class="Photo"></div>
</div>
<div class="News">
.....
</div>
</div>
<div class="AllDiv">
<div class="LeftDiv">
<div class="LeftDiv2"> </div>
<div class="Photo"></div>
</div>
<div class="News">
.....
</div>
</div>
I would like make that last div, LeftDiv, get CSS display:none.
For it I use code: div.AllDiv .LeftDiv .LeftDiv2:last-child{display:none;}, but it is not working.
Also i try use i usediv.AllDiv:last-child div.LeftDiv .LeftDiv2{display:none;}, but it not work too.
Tell me please where error and how write it correctly?

LeftDiv2 is the first child if it's parent element, not the last child. However, you don't need the last child class at all. just remove :last-child. If you really wanted to select it using the pseudo class you would want :first-child in your current markup.

Resources