My application is using antd upload element.
Using Playwright, I am writing a test where I upload files. The selector I am using is:
await page.locator('button:has-text("Click To Upload")').setInputFiles(`${filePath}/${filename1}`);
I am able to successfully grab the Click To Upload button and call click(), so I know the selector is correct. However, if I try the api setInputFiles I get
frame.setInputFiles: Error: Node is not an HTMLInputElement
=========================== logs ===========================
waiting for selector "button:has-text("Click To Upload")"
selector resolved to visible <button type="button" class="ant-btn ant-btn-default"></button>
============================================================
Looking at the html of the element I see:
<span>
<span class="">
<div class="ant-upload ant-upload-select ant-upload-select-text">
<span tabindex="0" class="ant-upload" role="button">
<input type="file" accept="" multiple="" style="display: none;">
<button type="button" class="ant-btn ant-btn-default" ant-click-animating-without-extra-node="false">
<span role="img" aria-label="upload" class="anticon anticon-upload">
<svg viewBox="64 64 896 896" focusable="false" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
</svg>
</span>
<span>Click To Upload</span>
</button>
</span>
</div>
<div class="ant-upload-list ant-upload-list-text"></div>
</span>
</span>
I have to be able to use setInputFiles because it takes the relative path automatically. Any ideas what is wrong and how I can make the setInputFiles work?
From reading documentation, setInputFiles requires a input element.
However, if input is not available because it is dynamic you can use this method:
let [fileChooser] = await Promise.all([
page.waitForEvent('filechooser'),
page.locator('button:has-text("Click To Upload")').click(),
]);
await fileChooser.setFiles([`${filePath}/${filename1}`]);
Related
I use this navigation in my Angular 5/Angular Materials application:
<!-- Navigation -->
<mat-toolbar color="warn">
<mat-toolbar-row>
<span class="nav-icon">
My Icon
</span>
<span class="nav-spacer"></span>
<button mat-button [routerLink]="['/home']">Home</button>
<button mat-button [routerLink]="['/login']">Login</button>
<button mat-button (click)="logout()">Logout</button>
</mat-toolbar-row>
</mat-toolbar>
<!-- Router Outlet -->
<router-outlet></router-outlet>
Actually I could not find how to set the active menu button active. Is there a way of doing this, e.g. with Route?
In Angular 6 you can add the routerLinkActive attribute to buttons. When the corresponding route is the current one, the content of this attribute will be added to the element's css classes.
For example:
<button mat-button [routerLink]="['/home']" routerLinkActive="mat-accent">
Home
</button>
When this button is clicked and the corresponding route becomes the active one, it will get the additional mat-accent CSS class.
Reference: Angular.io docs, Angular API docs
Hopefully, this helps someone the active class was not working for me I'm using Angular version 12.0.5
I replaced:
<button mat-raised-button routerLink="/overview/anxietydepressionchart/{{id}}" routerLinkActive="activebutton">Anxiety Depression Graph</button>
With:
<a mat-raised-button routerLink="/overview/anxietydepressionchart/{{id}}" routerLinkActive="activebutton" >Anxiety Depression Graph</a>
CSS:
.activebutton
{
background-color: rgb(51, 51, 51);
color: white;
}
This solved my active button issues.
I am developing a web app that displays animated schematics.
I have a feature that allows the user to switch between a 2D video of the schematic and a 3D video of the actual system. This works fine on Chrome, IE, and Firefox. It does not work on iOS on an iPad running 9.3.1. The two video are both controlled by the same custom video controls and play at the same time, the 2D video is in "front" (z-index=1) and the 3D is hidden behind it (z-index=0). When the 3D switch is hit it simply changes the 3D video to z-index=2. So nothing crazy going on here just a CSS trick. Also, it doesn't throw any errors when I inspect the console using my Mac.
This is my HTML for the page that plays the schematics:
<!-- Establishes the wrapper for all of the content and the angular controller that will control the content -->
<div id="player">
<video id="vid" onload="logDimensions()" ng-hide="twoDhidden" >
<source ng-src="{{selected.vidPath}}">
<track id="trk" ng-src="{{selected.track}}" kind="chapters" default> A browser with HTML5 text track support is required.
</video>
<video id="vid3D" ng-src="{{selected.vidPath3D}}" ng-hide="threeDhidden">
</video>
<span id="videoTime">{{currentTime | timeFilter}} / {{totalTime | timeFilter}}</span>
</div>
<div id="buttons">
<div id="videoOptions" class="fixed-action-btn vertical click-to-toggle">
<a class="btn-floating btn-touch blueIcon">
<i class="medium material-icons">more_vert</i>
</a>
<ul>
<li><a id="flankSpeed" class="btn-floating btn-touch" ng-class="flankClass"><i class="large material-icons ">fast_forward</i></a></li>
<li><a id="halfSpeed" class="btn-floating btn-touch" ng-class="halfClass"><i class="large material-icons ">slow_motion_video</i></a></li>
<li><a id="instructorBtn" title="Instructor" class="btn-floating btn-touch blueIcon"><i class="large material-icons ">supervisor_account</i></a></li>
</ul>
</div>
<div id="play" class="fixed-action-btn vertical click-to-toggle">
<a class="btn-floating btn-touch blueIcon">
<i title="Play" id="playIcon" class="material-icons">play_arrow</i>
<!-- <i id="pauseIcon" class="large material-icons hidden">pause_circle_filled</i> -->
</a>
<!-- <button id="instructorBtn" title="Instructor"> INSTR </button> -->
</div>
<div id="videoControls">
<svg id="draw_here" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line id="play_bar" x1="0%" y1="12" x2="100%" y2="12" /></line>
<div id="containment-wrapper">
<span id="dragMe"></span>
</div>
<div id="progress"></div>
</svg>
</div>
<div id="threeDSwitch" class="switch">
<label>
2D
<input id="threeDToggle" type="checkbox" class="default">
<span for="threeDToggle" ng-click="toggle3D()" class="lever"></span> 3D
</label>
</div>
</div>
I have searched for answers to this question but everything I find on iOS and HTML is from 2010-2013/4. Has anyone else run into this issue of playing two videos simultaneously? Is there a fix/workaround?
Short answer: iOS 10 added new capabilities that may be enough for you. And if not, it seems that true support for multiple simultaneous videos is coming soon.
In iOS 10, you can autoplay or call play() on a video without requiring user interaction, as long as it doesn't have sound. And starting the video no longer forces it into fullscreen playback:
https://webkit.org/blog/6784/new-video-policies-for-ios/
However you still can't play multiple videos simultaneously, but that patch just landed. So it's on the way:
https://bugs.webkit.org/show_bug.cgi?id=162366
Can you get your example working on iOS 10 by pausing one video when you start the other? You don't show them both at the same time, after all. You could keep them in sync by syncing up their currentTime properties each time the user switches.
I have a AngularJS mobile web site that works really well on iPhone 5, iPhone 5s (both running iOS 8) and also on my iPad (iOS 8 as well). However, the 'login' button does not work on the iPhone 6 (e.g. you click it and nothing happens). That exact same website works on the other iOS mobile platforms no problems at all. This doesn't make sense to me because they are all iOS 8?
On a side note, the website does work on an iPhone 6 emulator via Browser Stack but just not on a physical iPhone 6. I am not sure if it is a default setting on the iPhone 6 but I couldn't find anything.
Here is the code that is invoked when the login button is clicked:
The code snippet for the mark-up is:
<div class="col-sm-6 bordered-form field-padding">
<form name="loginForm" role="form" novalidate>
<div class="row">
<div class="col-sm-12">
<h4>Existing employers login</h4>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<input type="email" name="email" ng-model="user.email" placeholder="Please enter your email address" class="validatedInputField" required>
<span ng-show="loginForm.email.$valid" class="glyphicon glyphicon-ok icon-success"></span>
<span ng-show="loginForm.email.$invalid && loginForm.email.$dirty" class="glyphicon glyphicon-remove icon-invalid"></span>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<input type="password" name="password" ng-model="user.password" placeholder="Please enter your Password" class="validatedInputField" required ng-minlength="6">
<span ng-show="loginForm.password.$valid" class="glyphicon glyphicon-ok icon-success"></span>
<span ng-show="loginForm.password.$invalid && loginForm.password.$dirty" class="glyphicon glyphicon-remove icon-invalid"></span>
</div>
<div class="col-sm-12">
<button class="btn btn-success" ng-disabled="loginForm.$invalid" ng-click="authenticate()"><span class="glyphicon glyphicon-thumbs-up"></span> Login</button>
</div>
</div>
</form>
</div>
The angular function is here:
$scope.authenticate = function(){
var credentials = "Basic " + $window.btoa( this.user.email + ":" + this.user.password );
$http.get( ENV.apiEndpoint + '/auth/basic/',
{headers: {'Authorization': credentials}})
.success( function(data, status, headers, config){
AuthorisationService.LoginUser(data);
}).
error( function(data, status, headers, config) {
ErrorLoggingService.logError( data, status, headers, config );
});
}
Angular version: 1.2.15
Bootstrap version: ~3.0.3
Has anyone experienced this problem on the iPhone 6?
As I don't have access to a physical iPhone 6, I am having some problems isolating the issue. If someone has access to an iPhone 6, I could give them access to a test account on my website and they could replicate the issue really quickly.
Any help would be greatly appreciated.
I debugged this on the actual iPhone 6 that was having the problem and I saw that it was failing when the token returned by the server was being stored in session storage.
I called up Apple support and spent a fair bit of time on the phone with them. The page was working on other iPhone 6 devices but not this one. After trying a few different settings and confirming it was working on Chrome, the fantastic Apple support person asked me to see if the page was set to 'private'.
On the bottom right of the safari browser, you click an icon and you can set individual websites to 'private'. Unchecking this made the website work and I could store the token in session storage. It appears that my client accidentally set the website to 'private' and this was causing the issue.
Hopefully this will save someone else some time with a similar issue. Full credit to Apple support who spent over an hour to resolve this issue.
i want to make an onscreen Keyboard in dart with angular.js.
If one letter is pressed it should be on the html site.
How does it work?
This is what i´ve got in the index.html:
<button on-click="einsController.generateName()"id="z" class="button">Z</button>
<button on-click="einsController.generateName()"id="u" class="button">U</button>
<button on-click="einsController.generateName()"id="i" class="button">I</button>
<button on-click="einsController.generateName()"id="o" class="button">O</button>
<button on-click="einsController.generateName()"id="p" class="button">P</button>
<button on-click="einsController.generateName()"id="a" class="button">A</button>
<button on-click="einsController.generateName()"id="s" class="button">S</button>
<button on-click="einsController.generateName()"id="d" class="button">D</button>
<button on-click="einsController.generateName()"id="f" class="button">F</button>
<button on-click="einsController.generateName()"id="g" class="button">G</button>
<button on-click="einsController.generateName()"id="h" class="button">H</button>
<button on-click="einsController.generateName()"id="j" class="button">J</button>
<button on-click="einsController.generateName()"id="k" class="button">K</button>
<button on-click="einsController.generateName()"id="l" class="button">L</button>
<button on-click="einsController.generateName()"id="y" class="button">Y</button>
<button on-click="einsController.generateName()"id="x" class="button">X</button>
<button on-click="einsController.generateName()"id="c" class="button">C</button>
<button on-click="einsController.generateName()"id="v" class="button">V</button>
<button on-click="einsController.generateName()"id="b" class="button">B</button>
<button on-click="einsController.generateName()"id="n" class="button">N</button>
<button on-click="einsController.increment()"id="m" class="button">M</button>
This is where the letter shall appear:
<span id="badgeName">{{einsController.name}} </span>
this is the function in the dart File:
String name = '';
void generateName() {
name = "Q";
}
I still don´t get it. I think I need to change something in the method of generateName().
I want an onScreenKeyboard something like this http://code.tutsplus.com/tutorials/creating-a-keyboard-with-css-and-jquery--net-5774
Only that it I need to use dart Code.
The ng-click directive should be on the button where you click not on the tag where you want to show the result.
You don't need your query('#letter_A').onClick.listen(... when you use ng-click they have similar functionality.
You need to place the controller keyboard so that your buttons and the <div> where you want to show the output are within the tag where the controller is applied.
Try it and if it doesn't work update your question with the new code and I'll take another look.
I am using bootstrap version 2.x and when i use the app on a non mobile browser the scrollbars work correctly, however when i browse using iOS (iphone 5) there are no scrollbars -- specially vertical scrollbars and i cannot touch scroll on the screen - its just fixed i cannot more left or right or up or down......
Is there something i need to enable for touch scrolling like a different js library? or is there something broken.
I have read that if the tags for are not closed properly this could occur but my tags are closed.
So basically all my content is now not visible except for the first portion as i cannot scroll down...
Here is some code ( i am using durandal as a SPA)
this is my shell:
<div>
<header>
<!--ko compose: {view: 'nav'} --><!--/ko-->
</header>
<section id="content" class="main container-fluid">
<!--ko compose: {model: router.activeItem,
afterCompose: router.afterCompose,
transition: 'entrance'} -->
<!--/ko-->
</section>
<footer>
<!--ko compose: {view: 'footer'} --><!--/ko-->
</footer>
</div>
at the moment i removed all 'nav' and 'footer' rendering and only something in the content HTML that is rendered in there a simple page:
<section>
<div>
<button id="btnrefresh" class="btn btn-info btn-force-refresh pull-right"><i class="icon-refresh"></i> Refresh</button>
<button id="btnrefresh2" data-bind="click: refresh" class="btn btn-info btn-force-refresh pull-right"><i class="icon-refresh"></i> Data Refresh</button>
<h3 class="page-title" data-bind="text: title" ></h3>
<div data-bind="visible: showDetails" style="height:500px;width:50px;background-color:red">
</div>
</div>
</section>
this will not scroll in IOS :(
The answer to this was that it as a Durandal based problem.
After severe debugging and stripping everything out except durandal i figured out this can be fixed by opening up durandal/app.js and commenting out the following lines of code:
adaptToDevice: function() {
//document.ontouchmove = function (event) {
// event.preventDefault();
//};
}
Cheers