I'm trying to access a slider within shadow dom in a Cypress test.
This is what the control looks like in dev-tools.
<input type="range">
#shadow-root (user-agent)
<div>
<div pseudo="-webkit-slider-runnable-track" id="track">
<div id="thumb"></div>
</div>
</div>
Have added includeShadowDom: true to config, but am unable to access div#thumb with either of these commands.
cy.get('div#thumb')
cy.get('input[type="range"]')
.find('div#thumb')
What am I doing wrong?
You have #shadow-root (user-agent) so this shadow dom is created by the browser, not the web page.
You can't access a Shadow DOM created by the browser to display a control, that is called a #shadow-root (user-agent) in the Dev Tools. is one example.
You can only access open custom Shadow DOM (the ones that you create yourself), with the { mode: 'open' } option.
If you try the following, it will log null
cy.get('input[type="range"]')
.then($input => {
console.log($input[0].shadowRoot) // null means shadow dom is inaccessible
})
Related
I'm trying to create a simple app to learn Laravel with VueJS. I created a JetStream sample app with InertiaJS but seem to have gotten stuck on something that is probably just related to a fundamental misunderstanding.
I have added a link to my navigation section, which renders a Vue component, which uses GridJS to display a list of all users. Now when I check in Chrome's DevTools Network tab, the request seems to route correctly, but the template in the page doesn't get added to the DOM. I have some JS in the same document which gets a link hook, and it then uses that to look up a querySelector, but doesn't find it. The link is in the same file but within a template block, so the template block contents are obviously not being added to the DOM.
Here is my route:
Route::get('/user/view', function() {
return Inertia::render('UserList');
})->name('user.view');
Here is my Vue component (just relevant part):
<template>
<div class="row">
<div class="col-lg-12">
<div js-hook-url="{{ route('user/view') }}" js-hook-table-users></div>
</div>
</div>
</template>
<script>
import { Grid, html } from "gridjs";
import "gridjs/dist/theme/mermaid.css";
const USER_TABLE = '[js-hook-table-users]'
const TABLE_USERS_WRAPPER = document.querySelector(USER_TABLE);
const TABLE_USERS_URL = TABLE_USERS_WRAPPER.getAttribute('js-hook-url');
So the error happens on the last line there, because the node does not exist in the DOM and so is not picked up by the querySelector, so getAttribute gets called on null. Again, I'm sure this is a fundamental issue being new to Laravel and Vue. TIA
I'm using openseadragon to display deep zoom images, and my client wants there to be a button to download the image and a button to print the image, in addition to the regular nav items. There are no premade buttons for these functions in openseadragon, so I need to create the buttons manually. I have no idea how to do this, can anyone help me?
I need to:
(1) Add new buttons to the viewer nav
(2) Create functions to download and print the current image.
(1) We have similar functionality in our openseadragon (OSD) site. I made a custom toolbar including the default buttons and added our own buttons. The binding of custom actions are setup by simple giving OSD the id of the elements on init. The binding of the custom buttons was made 'manually'. The html code could look something like this:
<div id='viewerToolbar'>
<!-- Default buttons -->
<div class='toolbarItem' id='pv_home'></div>
<div class='toolbarItem' id='pv_zoom-in'></div>
<div class='toolbarItem' id='pv_zoom-out'></div>
<div class='toolbarItem' id='pv_full-page'></div>
<!-- custom actions -->
<div class='toolbarItem' id='customAction'>customAction</div>
<div class='toolbarItem' id='customAction2'>customAction2</div>
</div>
OSD setup something like this:
OpenSeadragon({
id: 'viewer',
tileSources: 'DZI_URL'
toolbar:'viewerToolbar',
zoomInButton: 'pv_zoom-in',
zoomOutButton: 'pv_zoom-out',
homeButton: 'pv_home',
fullPageButton: 'pv_full-page'
});
Custom button setup something like this (jQuery):
$( '#customAction' ).on( 'click', function() {
//Do custom action
});
$( '#customAction2' ).on( 'click', function() {
//Do custom action 2
});
(2) We created our own services to generate a PDF for download which the user also can print which. I think this is easier and gives a more reliable result than trying to print/download from OSD. You will probably run into issues like: printing is done from current zoom level; resolution issues; you will have to wait until tiles a fully loaded before creating png for downlaod etc.
I have the following partial view, which is just a test bit of HTML, nothing final
#model int
<div id="media-wrapper">
<span id="foo">For more details, click here:</span>
<iframe width="260" height="215"></iframe>
</div>
To use this view I call:
#{ Html.RenderPartial("_MediaLink", Model.PartnerId); }
In Chrome's dev tools, the <iframe> is rendered like so:
<iframe width="260" height="215">
</iframe width="260" height="215">
For some reason, it's attributes are duplicated. Looking at the <iframe> in Chrome dev tools, it is not coloured the same as other elements on the page. e.g. a <div class='test'> will have the div coloured red and class coloured orangy-brown. The iframe is entirely red.
Also the <iframe> is not in the DOM of the page. If you use, say, jQuery to find it, then I always see undefined in any queries.
What am I doing wrong here?
I want to add multizoom.js in my AngularJS project.
This is my index page:
<body>
<img id="zoom" ng-src="example.jpg" class="example ng-class">
<div ng-view> </div>
</body>
and this is detail page:
<img id="zoom" ng-src="example.jpg" class="example ng-class">
My problem is jQuery multizoom plugin doesn't zoom image which is in AngularJS's ng-view part.
If image is not in ng-view part multizoom works fine.
This is because I presume you are initialising the multizoom behaviour on the DOM ready event, using $(function() { /* ...(multizoom init code)... */ }); or $(document).ready(function() { /* ...(multizoom init code)... */. If so, that will only be run once, and likely before the details page is loaded into the <div ng-view></div>. As a consequence, it will not be able to find the image on that page it is searching for as it hasn't been loaded in yet.
Instead, what you need to do is initialise your multizoom functionality whenever the ng-view content is loaded, using the event that is emitted, like so:
// (inside some function with $rootScope available)
$rootScope.$on('$viewContentLoaded', function() {
// ... (multiview init code here) ...
});
Does that make sense?
As a small side note, don't have multiple elements with the same ID, it's not a good idea. Instead, use a class to signify the images you want to apply the multizoom plugin to.
I'm experiencing a problem ONLY in Chrome where an Ajax response is not being displayed. Oddly, when I hover over the page's main menu, the response shows up and also stays when I move the mouse away again from the main menu.
Here is a more specific description:
The page contains a search box that allows the user to start typing a contact name. As the user types, an ajax request is made to return a list of suggested contacts. The user can then click on a radio button corresponding to a contact in that list to display all the contact information of that one person. Up to that point everything works fine. But now if the user goes back to the search box to change his search, the previously returned list of contacts goes away, but the new one from the new search does not show up. It is the click on the radio button that causes the following search not to display any ajax responses. The odd thing now is that the response does show up if the user hovers over the main menu at the top of the page (which uses css), and it also stays if the user moves the mouse away again from the menu and everything works fine afterwards. Here is the page structure:
<div id="fixedTopBar">
<?php
include("include/mainMenu.php");
?>
</div>
<div id="pageContent">
<div id="contactListContainer">
<form>
<input id="contactSearchBox" type="text" autocomplete="off" onkeyup="showHint(this.value, 'contactList', null , 'include/ajax/getContacts.php')">
</form>
<div id="contactList">
<form>
<?php
echoAllContacts(getContactsFromDatabase());
?>
</form>
</div>
</div>
<div id="profile"></div>
The ajax request is made with the showHint() function in the id="contactSearchBox" input, and the response is displayed within the id="contactList" div.
So in short, the click on a radio button causes the problem, and hovering over the top menu solves the problem (very strange no?).
Please let me know what other code you need to track down the problem if you have any ideas, or if anything I said did not make sense.
Thanks in advance!
I was able to solve my problem with some css:
The id="contactListContainer" div was positioned: fixed ...once I positioned it absolute, the problem was gone. Now, to actually position it fixed and not have the problem, I also had to add the position:fixed or position:absolute property to the child div id="contactList".