Cannot find the xpath for span after svg. I need to get list of all elements and validate if the text is Account
I tried xpath
List<WebElement> listOffices =
driver.findElements(By.xpath("//div [#id='joblist']//div[#id='view-
content']//div[#id='page-data']//div[contains(#id,'project-tags')]/span/span/*[name()='svg']"));
The Dom elements are below :
<div id="project-tags-119651" class="details uk-margin-remove-top" xpath="1">
<span class="tag mute">
<span uk-icon="icon:tag;ratio:0.8" class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="0.8"> <path fill="none" stroke="#000" stroke-width="1.1" d="M17.5,3.71 L17.5,7.72 C17.5,7.96 17.4,8.2 17.21,8.39 L8.39,17.2 C7.99,17.6 7.33,17.6 6.93,17.2 L2.8,13.07 C2.4,12.67 2.4,12.01 2.8,11.61 L11.61,2.8 C11.81,2.6 12.08,2.5 12.34,2.5 L16.19,2.5 C16.52,2.5 16.86,2.63 17.11,2.88 C17.35,3.11 17.48,3.4 17.5,3.71 L17.5,3.71 Z"></path> <circle cx="14" cy="6" r="1"></circle></svg>
</span>
Account
</span>
</div>
I need xpath to : Account
Here is the xpath that you should use
//span[#class='tag mute' and normalize-space(.)='Account']
Used Class on the safer side, but you have to use normalize-space to remove the preceding and following white spaces (spaces, tabs,new lines) while comparing the text as part of xpath.
Related
I want to show all the media files that the user have been uploaded in frontend but in blade template this shows an error Undefined variable, I have done everything right in my knowledge to solve this but it's not resolving.
I have tried compact() method but that can't solve the problem. I want the data from database and show in frontend but the variable from controller to blade template is not passing properly.
controller.php
public function show()
{
$uploads = media::with('user')
->where('user_id', '=', auth()->user()->id)
->latest()
->get();
return view('dashboard', compact('uploads'));
}
dashboard.blade.php
#foreach ($uploads as $media)
<div class="p-6 flex space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
<div class="flex-1">
<div class="flex justify-between items-center">
<div>
<span class="text-gray-800">{{ $media->user->name }}</span>
<small class="ml-2 text-sm text-gray-600">{{ $media->created_at->format('j M Y, g:i a') }}</small>
</div>
</div>
<p class="mt-4 text-lg text-gray-900">{{ $media->media }}</p>
</div>
</div>
#endforeach
It may be that the media model is in uppercase :
$uploades = Media::with('users')...
or its reference is not imported in your controller :
use App\Models\Media;
Write before return view(...) in controller :
dd($uploades);
What result do you see?
I have a series of checkboxes that I create using mat-checkbox, with it respective Select all one. What I need is to target that specific (and first) checkbox and hide it. Only the checkbox, not the label or any other element within mat-checkbox.
My checkboxes are default ones, so an example would be something like this:
Demo
After the elements are created, you have a structure that looks like this:
<mat-checkbox _ngcontent-ici-c72="" class="mat-checkbox mat-accent ng-valid ng-dirty ng-touched"
ng-reflect-model="false" ng-reflect-options="[object Object]" d="mat-checkbox-1">
<label class="mat-checkbox-layout" for="mat-checkbox-1-input">
<div class="mat-checkbox-inner-container">
<input type="checkbox" class="mat-checkbox-input cdk-visually-hidden" id="mat-checkbox-1-input" tabindex="0"
aria-checked="false">
<div matripple="" class="mat-ripple mat-checkbox-ripple mat-focus-indicator"
ng-reflect-trigger="[object HTMLLabelElement]" ng-reflect-disabled="false" ng-reflect-radius="20"
ng-reflect-centered="true" ng-reflect-animation="[object Object]">
<div class="mat-ripple-element mat-checkbox-persistent-ripple"></div>
</div>
<div class="mat-checkbox-frame"></div>
<div class="mat-checkbox-background"><svg version="1.1" focusable="false" viewBox="0 0 24 24"
xml:space="preserve" class="mat-checkbox-checkmark">
<path fill="none" stroke="white" d="M4.1,12.7 9,17.6 20.3,6.3" class="mat-checkbox-checkmark-path"></path>
</svg>
<div class="mat-checkbox-mixedmark"></div>
</div>
</div>
<span class="mat-checkbox-label"><span style="display: none;">
</span>Select All</span>
</label>
</mat-checkbox>
Everything created after the page is loaded by Angular, except the span element that contains Select All.
I need to target only the first element that contains the class mat-checkbox-inner-container
So far, if I try via CSS, all elements with that class are hidden, i.e. all checkboxes, not only the first one.
I've also tried to create a class in my CSS and add it via TS, with no positive result. This is the snippet for that:
checkHider():void {
let elem = document.getElementsByClassName("mat-checkbox-inner-container")[0];
elem.classList.add("hider");
}
I was able to get the element inside the ngOnInit function, and it worked.
This is the snippet. Note that the position is only specific to my case.
let elem = document.getElementsByTagName('div')[6];
elem.setAttribute("style", "display: none");
Please take a look at my approach and tell me is it a good/correct way to add a complex DOM element inside Fullcalendar header.
viewSkeletonRender(info){
this.$refs.fullCalendar.$el.querySelector('.fc-header-toolbar').insertAdjacentHTML('afterbegin', `
<div class="event_create-wrap">
<div class="event_create-btn">
<div class="event_create-btn-left">
Create
</div>
<div class="event_create-dropdown">
<button class="event_create-btn-dropdown" #click="eventDropdownClicked">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M111 13.8822L3.62734 8.39658C3.23555 8.01742 3.23555 7.40432 3.62734 7.0292L4.5693 6.11762C4.96109 5.73846 5.59462 5.73846 5.98224 6.11762L10.0002 10.006L14.0181 6.11762C14.4099 5.73846 15.0434 5.73846 15.431 6.11762L16.373 7.0292C16.7648 7.40836 16.7648 8.02146 16.373 8.39658L10.7045 13.8822C10.3211 14.2614 9.68756 14.2614 9.29578 13.8822Z" fill="white"/>
</svg>
</button>
<div class="event_create-btn-dropdown-content" :class="{show: isEventListShown}">
1
2
3
</div>
</div>
</div>
</div>
`);
}
I am using "viewSkeletonRender" hook but i am not really sure that using "insertAdjacentHTML" is good, since i've used it first time.
I can't use AppendChild because i need to add so many html code there and it is difficult to create all html objects step by step (what if i need to add 100 html tags...) .
I can't use innerHtml because it will remove all what i have in fc-header-toolbar.
And as i understand i can't bind any VueJs props and methods to this HTML with this approach because i add this html as vanila Js.
Thank you for your advice.
This is probably too broad of a question, but I am trying to recreate a cursomizer with Vuejs as a framework. I got stuck in a position where I have to change the cursors dynamically. These cursors are supposed to be SVG files which are able to be accessed from the next component where the user would be able to modify the size and fill. My concern is can store different cursors in different buttons and update when clicked. The code that I provided contains different list items which are dynamically generated and when clicked, it adds active class to the chosen item. If anyone has any advice on how to approach this problem, jump in.
<template>
<div>
<h1>Choose cursor</h1>
<section class="cursors-wrapper">
<ul class="cursor-list">
<li class="cursor-list-item" #click="activateCursor(cursor.cursorId)" :class="{ active : active_el == cursor.cursorId }" v-for="cursor in cursors" >
<a href="#" class="cursor-list-item-inner">
<!-- SVGG-->
<div v-html="cursor.cursorImage"></div>
</a>
</li>
</ul>
</section>
<div #click="choosenOne"></div>
</div>
<script>
export default {
data () {
return {
cursors: [
{
cursorId: '1',
cursorImage: `<svg class="cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
width="16">
<ellipse class="cursor-svg__main" cx="8" cy="8" rx="8" ry="8" fill="#000"></ellipse>
</svg>`
},
{
cursorId: '2',
cursorImage: `<svg class="cursor-overflow cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
width="16">/* */
<ellipse class="cursor-svg__main" cx="8" cy="8" rx="8" opacity="1" ry="8" fill="none"
stroke-width="3" stroke="#000"></ellipse>
</svg>`
},
{
cursorId: '3',
cursorImage: ` <svg class="cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
width="16">
<path class="cursor-svg__main" d="M 0 0 L 12 10 L 0 16" opacity="1" fill="#000"></path>
</svg>`
}
],
active_el: 0
}
},
methods:{
activateCursor:function(el){
this.active_el = el;
console.log(this.cursorId);
}
}
}
The best solution I can think of is to use style bindings. This way, you can define the cursor in your data object and change it dynamically afterwards ( v-bind:style="{cursor: selectedCursor}").
As for setting the cursor, you can use the method like shown by the top answer of this question.
I've created a fiddle to illustrate what I mean
https://jsfiddle.net/rnab4tep/1/
All you have to do now is set selectedCursor to the cursor of your liking.
I've ran into a problem and can't seem to get the GTM to register the event specifically.
Here is how the HTML looks like for the element that I need to register when someone clicks on it.
<div class="targetDiv option option-hoverable">
<div class="shape">
<svg width="140" height="140" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Shape + Shape + Shape</title>
<desc>Created with Sketch.</desc>
<g transform="translate(0 0)" sketch:type="MSShapeGroup" fill="none">
<circle id="Shape" fill="#CFDF80" cx="40" cy="84.434" r="40"></circle>
<circle id="Shape" fill="#FDE9E8" cx="80" cy="40" r="40"></circle>
<circle fill="#E2506E" cx="100" cy="100" r="40"></circle>
</g>
</svg>
</div>
<h3>Product Title</h3>
<div class="actions">
<a class="button button-subtle button-toggle" data-colors="tender" data-toggled="Select" href="">Select</a>
</div>
</div>
I can't get the Click to register on the outter DIV click, it registers wither the button click or the click on shapes. I need it to register on the DIV with class targetDiv.
I'm getting correct Click triggers from other places, so listening isn't a problem.
Right now the trigger is set like this:
Trigger Type - Click - all elements
Trigger fires on some clicks.
And the conditions are:
Click Element -> matches CSS selector -> targetDiv
This
Click Element -> matches CSS selector -> targetDiv
wants to match a <targetDiv> element, which is not present in your html code.
Try writing a dot before the classname, since that is how you can write a css selector for a class:
Click Element -> matches CSS selector -> .targetDiv