I need to select an image which is inside of a button. The problem is that there are six similar images and they do not have any unique identifier, except their alt message and source. Here is the code I am working with.
<div class="dropup-content" style="height: auto; max-height: 1000px;">
<button type="button">
<img src="images/en_US.png" alt="English" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/nb_NO.png" alt="Norwegian" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/fi_FI.png" alt="Finnish" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/fr_FR.png" alt="French" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/nl_BE.png" alt="Dutch" style="width: 45px; height: 30px;">
</button>
<button type="button">
<img src="images/de_DE.png" alt="German" style="width: 45px; height: 30px;">
</button>
</div>
Now, if I need to select the button with the alt value Swedish, how would I do it? For example, I can get the first one using this code:
cy.get('.dropup-content').first().click()
However, the problem is that the sequence comes randomly every time. So I can not rely on the first() or next() methods. Is there any way in Cypress to click on the button with image attribute Swedish?
You can do this like:
cy.get('[alt="Swedish"]').click()
Try
cy.get('button[alt="Swedish"]').click()
But if you have a control on how those buttons are created, I'd suggest you should add data-cy tag to them and then access them by
cy.get('button[data-cy="Swedish"]').click()
Read why in best practices docu
Related
I try to show different status depending on a field gallerypicture.status with thymeleaf
<tr th:each="image: ${galleryPictures}" class=".col-sm-7">
<td th:switch="${image.status}">
<p th:case="'neverReviewed'">
<div class="img-container" style="max-width: 50px" data-toggle="tooltip" data-placement="top" th:title="#{root.client.mitarbeiter.detectionTable.neverReviewed}">
<img th:src="#{/img/Check_blue_icon.png}" style="width: 50%; height: 50%; object-fit: contain;">
</div>
</p>
<p th:case="'partiallyReviewed'">
<div class="img-container" style="max-width: 50px" data-toggle="tooltip" data-placement="top" th:title="#{root.client.mitarbeiter.detectionTable.partiallyReviewed}">
<img th:src="#{/img/Check_orange_icon.png}" style="width: 50%; height: 50%; object-fit: contain;">
</div>
</p>
<p th:case="'fullyReviewed'">
<div class="img-container" style="max-width: 50px" data-toggle="tooltip" data-placement="top" th:title="#{root.client.mitarbeiter.detectionTable.fullyReviewed}">
<img th:src="#{/img/Check_green_icon.png}" style="width: 50%; height: 50%; object-fit: contain;">
</div>
</p>
<p th:case="'*'">
<div class="img-container" style="max-width: 50px" data-toggle="tooltip" data-placement="top" th:title="#{root.client.mitarbeiter.detectionTable.neverReviewed}">
<img th:src="#{/img/Check_blue_icon.png}" style="width: 50%; height: 50%; object-fit: contain;">
</div>
</p>
</td>
with galleryPicture.status defined as an enum as follows:
public enum GalleryImage_DetectionStatus {
neverReviewed,
partiallyReviewed,
fullyReviewed;
}
But thymeleaf applies all 3 cases at once. What is wrong with my code?
The default case '*' should be in the end. Please see here thymeleaf tutorial Then it will catch only non-specific cases.
for matching enum with switch case:
th:case="${T(yourpackage.GalleryImage_DetectionStatus).neverReviewed}"
I need a blade component to emit an AlpineJS click event to use it on several places. I made some tests but I can't get it working.
This works fine:
<div x-data="{open:false}">
<button x-on:click.window="open = true">Open</button>
<div x-show="open">
<div style="width: 100px; height: 100px; background-color: #0a6ebd; border-radius: 15px;">
</div>
</div>
But if I wrap the button in a blade component, I doesn's work:
<div x-data="{open:false}">
<x-my-button x-on:click.window="open = true"></x-my-button>
<div x-show="open">
<div style="width: 100px; height: 100px; background-color: #0a6ebd; border-radius: 15px;">
</div>
</div>
The blade component is the button:
<button>Open</button>
How can I emit the click event to the parent?
Just need to pass $attributes to blade component:
<button {{$attributes}}>Open</button>
I know little about Laravel and Masonry grid layout, but I know how Bootstrap framework works.
I need to change the number of columns in a Boostrap grid for small size devices like a mobile phone. Currently, the number of columns is 3 because the class used is col-xs-4. However, I need to change it to col-xs-6, so that it shows 2 columns.
I don't think it's that hard, but I don't know how Laravel works.
I tried searching for those divs in the whole project so that I could directly change those classes, but I couldn't find anything.
This is an example of one column in a row:
<div class="container-fluid">
<div class="row">
<div class="fw-divider-space hidden-below-xl pt-70"></div>
<div class="col-lg-12">
<div data-animation="fadeInDown" class="row isotope-wrapper masonry-layout c-gutter-5 c-mb-5 animate animated fadeInDown" style="position: relative; height: 798px;">
<div class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 col-xs-4 col-4" style="position: absolute; left: 0%; top: 0px;">
<div class="vertical-item item-gallery content-absolute text-center ds">
<a href="https://www.tusencuentros.cl/modelo/9/ver" class="item-media h-100 w-100 d-block"><img src="https://www.tusencuentros.cl/storage/fotos_perfil/9-1.jpg" alt="Modelo">
<div class="media-links"></div>
</a>
<img src="https://clubvip.cl/storage/watsapp_logo.png" style="width: 40px; height: 40px; margin-top: 5px;"> <i aria-hidden="true" class="fa fa-phone-square" style="font-size: 36px; color: rgb(255, 255, 255); float: right;"></i>
<div class="item-content" style="background-color: rgb(233, 11, 165);">
<div class="item-title" style="top: -80px; width: 100%;">
<div style="display: inline-flex;">
<p style="font-size: 14px;">CARLITA </p>
</div>
<div>
<p style="font-size: 12px;">CHILENA, 20</p>
</div>
<div>
<p style="font-size: 10px;">Medidas: 94-62-98</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I expect the classes col-xs-4 to be col-xs-6.
I assume you use laravel blade
You can use dynamic css class in here like
class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 {{ $isMobile ? 'col-xs-6' : 'col-xs-4' }} col-4"
In the curly blackets : is this mobile device? if yes, I will use col-xs-6 if not I will use col-xs-4
But you need to send the checking of $isMobile from your controller and there is a very simple component for that here jenssegers/agent
After installation you can perform check for mobile device by using $agent->isMobile() method
Finally I could fix it by finding out that the folder with the file that contains those divs was inside a non-public location called "resources". Since I know little about Laravel Blade, I didn't know the directory structure.
I'm trying to create a textbox with an attached button that looks similar to a Kendo DatePicker or NumericTextBox. This is close, but it doesn't quite line up. Any help straightening this up would be appreciated.
<style>
.unselectable
{
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<span class="k-widget k-datepicker k-header" style="width: 136px">
<span class="k-picker-wrap k-state-default">
<input class="k-input" type="text" name="searchParam" id="searchParam" placeholder="Name ..." />
<span class="unselectable k-button k-select">
<img class="unselectable" src="~/Images/search_flashlight_16.png" />
</span>
</span>
</span>
Everything you should need is this:
See jsFiddle DEMO
<span class="k-textbox k-button k-space-right">
<input value="This is the value" />
<a class="k-icon k-filter"></a>
</span>
Also see the "documentation" (Look at the source for the example) for this here.
EDIT:
Since the asker really wanted it to behave as a button (i.e. the click-effect), just add the k-button class to the outter span.
I know that this is an old question, but I felt like Shion's answer wasn't quite what I was looking for. So after a bit of experimenting I came up with this which doesn't give you the flicker of the button:
<span class="k-picker-wrap k-state-default">
<input style="width: 100%;" type="text" class="k-input">
<span unselectable="on" class="k-select" aria-label="select" role="button">
<span class="k-icon k-i-filter"></span>
</span>
</span>
Live Example: Dojo
I have a sub grid that has a status column defined. I would like to disable the Add button on its navGrid until subgrid's status column's value is 'Completed'.
Here is a snippet of the HTML that is being generated that I'm (unsuccessfuly) trying to manipulate: (I think I need to use the first and last elements)...???
<div id="USAttorneyFoldersGrid_43" class="tablediv">
<div id="gbox_USAttorneyFoldersGrid_43_t" class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" dir="ltr" style="width: 826px;">
<div id="lui_USAttorneyFoldersGrid_43_t" class="ui-widget-overlay jqgrid-overlay"></div>
<div id="load_USAttorneyFoldersGrid_43_t" class="loading ui-state-default ui-state-active" style="display: none;">Loading...</div>
<div id="editmodUSAttorneyFoldersGrid_43_t" class="ui-widget ui-widget-content ui-corner-all ui-jqdialog jqmID1" dir="ltr" style="width: 300px; height: auto; z-index: 950; overflow: hidden; top: 294px; left: 136px; display: none;" tabindex="-1" role="dialog" aria-labelledby="edithdUSAttorneyFoldersGrid_43_t" aria-hidden="true">
<div id="gview_USAttorneyFoldersGrid_43_t" class="ui-jqgrid-view" style="width: 826px;">
<div id="rs_mUSAttorneyFoldersGrid_43_t" class="ui-jqgrid-resize-mark"> </div>
<div id="p_USAttorneyFoldersGrid_43_t" class="scroll ui-state-default ui-jqgrid-pager ui-corner-bottom" style="width: 826px;" dir="ltr">
<div id="pg_p_USAttorneyFoldersGrid_43_t" class="ui-pager-control" role="group">
This is my selector that doesn't appear to work:
$('#USAttorneyFoldersGrid_43').navGrid('pg_p_USAttorneyFoldersGrid_43_t', { add: false });
What am I missing here?
You posted almost no code, but I hope that my old answer with the demo gives you information which you need.