I want to remove the link like appearance in the below code.
For your information this template is being used in outlook
<span th:text="${SomeUrl}" th:remove="tag"
style="justify-content: normal;width: 100%; word-break: break-all;
text-decoration: none;pointer-events: none;cursor: default;">
</span>
Related
Hi I am new in exploring cypress.
I notice that, there is no select options in my html code. How can I select the option in the dropdown box?
Let's take a look of my html
<div class="row asset_config">
<div class="loader-container">
<div class="loader-content">
<div class="required form-group"><label for="cc_7sgwxb2v9" class="">allocation</label>
<div class="Select css-b62m3t-container"><span id="react-select-3-live-region" class="css-1f43avz-a11yText-A11yText"></span><span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-1f43avz-a11yText-A11yText"></span>
<div class="Select__control css-1s2u09g-control">
<div class="Select__value-container css-319lph-ValueContainer">
<div class="Select__placeholder css-14el2xx-placeholder" id="react-select-3-placeholder">Select allocation</div>
<div class="Select__input-container css-6j8wv5-Input" data-value=""><input class="Select__input" autocapitalize="none" autocomplete="off" autocorrect="off" id="cc_7sgwxb2v9" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;"></div>
</div>
<div class="Select__indicators css-1hb7zxy-IndicatorsContainer">
<div class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer" aria-hidden="true"><span class="connect-icon connect-icon-caret-down"></span></div>
</div>
</div><input name="allocationType" type="hidden" value="">
</div>
</div>
</div>
</div>
</div>
In fact, I also notice that, cypress studio suggest me code to click the dropdown box:
cy.get(':nth-child(2) > form > .allocation_session > .asset_config > .loader-container > .loader-content > .required > .Select > .Select__control > .Select__value-container > .Select__input-container').click()
I found that not only unreadable is this approach, but also not reliable, because sometimes suggested codes that click on other dropdown doesnt work, if I didnt run the example code above or other suggested code.
Is there any reason behind why suggested code is coupled with other suggested code?
Is there a better way to select the element I want to get?
edit:
picture included
The react-select has the same user-actions as an ordinary HTML select, but you cannot use cy.select() command on it.
The general pattern is
open the dropdown menu by clicking on the "main" control
find the option you want to select within the menu listbox that is injected into the DOM after the above click action
click that option
verify the text of the option is now showing in the placeholder
// open the dropdown menu
cy.contains('label', 'allocation')
.next('.Select')
.click()
// find the option
cy.contains('Balanced Plus')
.click()
// verify option is selected
cy.contains('label', 'allocation')
.next('.Select')
.find('.Select__placeholder')
.should('contain', 'Balanced Plus')
I want to test for broken images on the page.
If I inspect the DOM for the broken image I see
<img src="https://www.example.com/images/a123.jpg" alt="a123">
#shadow-root (user-agent)
<span id="alttext-container">
<img id="alttext-image" width="16" height="16" align="left" style="margin: 0px;
display: inline; float: left;">
<span id="alttext">a123</span>
</span>
But if I try to access the alttext in the test it fails.
cy.get('img[src="https://www.example.com/images/a123.jpg"]')
.shadow()
.find('span[id="alttext"]')
How do I verify the alt text that shows on the screen.
Unfortunately the #shadow-root (user-agent) child element can't be accessed from javascript, so it also can't be queried with Cypress commands.
The best you can do to verify the image isn't broken is to check it's naturalWidth property
cy.get('img[src="https://www.example.com/images/a123.jpg"]')
.should('be.visible')
.and($img => expect($img[0].naturalWidth).to.be.gt(0))
folks!
I am using Laravel 5.6 with Hyn Laravel-Tenancy Installed.
I have a main menu that is the same for all tenants (subdomains), however, for one or another specific tenant (subdomain), I would like some items to be displayed from that main menu, but for all other tenants, these menu items not visible and also inaccessible, even if called by the url.
On the Blade I used a "#if route::has", but even limited that route to a specific subdomain, this route is available for all other subdomains, so that #if receives as true and ends up displaying the menu item.
I'm not finding a simple solution, could create a helper that identifies the url and if it is from a specific subdomain, would display the item and for the other subdomains would not be displayed, but "I guess" that it should have a native form using Blade along with "routes\web" to achieve this result.
Thanks!!!
use gate and can in laravel
in authserviceprovider create a gate like that:
$gate->define('see-menu',function(){
//check domains or rules or every thing that you need to check to obtain access
//return true if user have access and false if not access
});
and in you view use can to check see-menu
#can('see-menu')
//your code
<li class="devider"></li>.......
#endcan
u can do it like that i have my routs "admin department listOfTeachers" that thet user can see the button of sidemenu and use it
#if(Request::is('admin') || Request::is('department') || Request::is('listOfTeachers'))
<div id="mySidenav" class="sidenav">
×
<p id="poficon2" style="font-family: AwesomeFont;font-size: 27px; float: right;width:auto;height:auto;padding-left: 15px;padding-right: 20px;" class="colorIcon" id="newbornbaby"></p><p style="font-size: 23px;">الرئيسية</p>
<p id="poficon2" style="font-family: AwesomeFont;font-size: 27px; float: right;width:auto;height:auto;padding-left: 15px;padding-right: 20px;" class="colorIcon" id="newbornbaby"></p><p style="font-size: 23px;">قائمة المترشحين</p>
<p id="poficon2" style="font-family: AwesomeFont;font-size: 27px; float: right;width:auto;height:auto;padding-left: 15px;padding-right: 20px;" class="colorIcon" id="newbornbaby"></p><p style="font-size: 23px;">قائمة الاساتذة</p>
<p id="poficon2" style="font-family: AwesomeFont;font-size: 27px; float: right;width:auto;height:auto;padding-left: 15px;padding-right: 20px;" class="colorIcon" id="newbornbaby"></p><p style="font-size: 23px;">الشعب و التخصصات</p>
<p id="poficon2" style="font-family: AwesomeFont;font-size: 27px; float: right;width:auto;height:auto;padding-left: 15px;padding-right: 20px;" class="colorIcon" id="newbornbaby"></p><p style="font-size: 23px;">حسابات العمال</p>
</div>
<div class="centerVertical" style="float:right;margin-right:1.2rem;" onclick="openNav()">
<img src="../resources/images/menu.png" style="margin-top:3px;float:left;width:27px;height:20px;background-size: contain;background-repeat: no-repeat;" alt="student">
</div>
#endif
I want to be able to show an element (phone number) which is initially hidden. I have a button called show phone which on click will display the element containing the phone number which was hidden. It is working quite alright but I want to add a new rule for it to show the phone number. I want it to show the phone number only if the user is logged in to his account if it will redirect to the login page with a flash message saying "In order to view this phone number you must be logged in". I tried to put an auth::check to the div and got stuck at this point.
Can anyone please tell me how can I achieve that using Laravel.
Here is my view
<span class="job-is ft" id="more" onclick="$('.details').slideToggle(function(){$('#more').html($('.details').is(':visible')?'Hide Phone':'Show Phone');});">Voir le numero</span>
#if (Auth::check())
<div class="extra-job-info details" style="display:none">
<p style="text-align: center; padding: 10px; font-size: 45px;"><i class="la la-phone"></i> {{ $profiledetail->phone }}</p>
</div>
#else
<p> In order to view this number you must login
#endif
Do anyone know an easy way to achieve this?
Any help will be appreciated.
Something like this
<span class="job-is ft" id="more" onclick="$('.details').slideToggle(function(){$('#more').html($('.details').is(':visible')?'Hide Phone':'Show Phone');});">Voir le numero</span>
<div class="extra-job-info details" style="display:none">
#if (Auth::check())
<p style="text-align: center; padding: 10px; font-size: 45px;"><i class="la la-phone"></i> {{ $profiledetail->phone }}</p>
#else
<p>Please login to see details</p>
#endif
</div>
I am trying to select a value from the table of dropdown menu. But Watir always gave me the unlocate error when using table/tr/td.
I can't locate the element using
#browser.div(:id, 'wikiActionMenuLink_dropdown').element(:tag_name, 'table').element(:tag_name, 'tbody').element(:tag_name => 'td').text
But the output of code below returns true.
#browser.div(:id, 'wikiActionMenuLink_dropdown').element(:tag_name, 'table').element(:tag_name, 'tbody').element(:tag_name => 'td').exists?
I also tried
#browser.select_list(:id, 'wikiActionMenuLink_dropdown').select_value('Delete Wiki')
but got error "unable to locate element, using {:id=>"wikiActionMenuLink_dropdown", :tag_name=>"select"}"
Below the html. Could someone give me some suggestions?
<div id="wikiActionMenuLink_dropdown" class="dijitPopup dijitMenuPopup" style="visibility: visible; top: 123.75px; left: 1592px; right: auto; z-index: 1000; height: auto; overflow: visible; display: none;" role="region" aria-label="dijit_Menu_2" dijitpopupparent="">
<table id="dijit_Menu_2" class="dijit dijitReset dijitMenuTab`enter code here`le lotusPlain dijitMenu dijitMenuPassive" cellspacing="0" tabindex="0" role="menu" widgetid="dijit_Menu_2" style="top: 0px; visibility: visible;">
<tbody class="dijitReset" data-dojo-attach-point="containerNode">
<tr id="dijit_MenuItem_15" class="dijitReset dijitMenuItem" tabindex="-1" role="menuitem" data-dojo-attach-point="focusNode" style="-moz-user-select: none;" aria-label="Edit Wiki " title="Edit settings of this wiki." widgetid="dijit_MenuItem_15">
<tr id="dijit_MenuItem_16" class="dijitReset dijitMenuItem" tabindex="-1" role="menuitem" data-dojo-attach-point="focusNode" style="-moz-user-select: none;" aria-label="Delete Wiki " title="Delete this wiki." widgetid="dijit_MenuItem_16">
</tbody>
</table>
<iframe class="dijitBackgroundIframe" src="javascript:""" role="presentation" style="opacity: 0.1; width: 100%; height: 100%;" tabindex="-1">
<html>
<head></head>
<body></body>
</html>
</iframe>
</div>
Watir will only return the text of an element if the text is currently visible, regardless of whether the element exists. If you made the same call in your first example with .present? instead of .exists? it would return false.
For non-select/option dropdown interactions, you usually need to click the dropdown element first, and then once the options are visible, click on the one you want.