some url can not be open by react-native webview - react-native

i have a website, and i am sure i can open it in PC browser, or mobile browser, util i use React-Native Android Webview Component .
the WebView Component, i can use it open some url ,such as m.facebook.com, but could not open my website, do not know why, i have set some props of WebView ,such as automaticallyAdjustContentInsets ,javaScriptEnabled,domStorageEnabled,scalesPageToFit.
when i use the FB example UIExplorer, it good work for open m.facebook.com, but when i change the url to my website, could not open it.
anyone know how is it ?
And when i use WebView Component and get into trouble, how can i debug it?

yep, i know how is it,
the reason is my html page height is 0
when i find the answer of this question, another one meet the same question, he finally find the reason is his html page height is 0,
he can debug his app with chrome inspcet, but i can not.
so, the first thing i should do is try to debug my app, after a long time ,i dubug it successful and he is right ,the reason is no height for html body, and then it is easy to reslove like this,add this line of code to my html page when it is load:
$(html).height($(window).height())
but, after a second , i find it is invalid in some android phone, i will get:
$(window).height() == 0; // true
then, i change the line to:
if($(window).height()!==0) {
$(html).height($(window).height());
} else {
$(html).height(10000);
}
it is a fast way to fix it, and the page is correct.
in the end ,i am confuse of the height, i am sure the page can be open in mobile browser, why the height become 0 in react-native WebView?

Related

Init with push vue router, back button not working

The problem seems easier but not working, im working over a spa on webview for apps.
So for example, in some cases I start the web with a main route, like 'localhost/path1/path2'.
So if they press a custom button in topbar (custom component), it goes to 'localhost/path1', here perfect.
The problem is when they press the native back button, or the back arrow in desktop (native).
What happen here is the app is closed or the url is empty in desktop.
I tried to force a push in many ways on load vue with many paths, but not working, I tried to intercept native back and force push to avoid close first time with many paths, but not working anyways.
If someone understand what Im saying and a solve for urls with path/id, and after native back just keep path, instead of close I hope you can help.
Thanks

Recognizing element in an Hybrid App - Android

I am new to Android testing. I am currently trying to automate a scenario. I have attached the snapshot of the app screen:
Scenario:
I need to click on "Clock In".
A screen slides from the bottom as shown in the snapshot.
I need to select an item as shown by the arrow.
The developer is saying that it is a Hybrid app. A lot of confusion here for me as I am able to click on "Clock In", but I am not able to select "DL 380 Memory Upgrade".
Doubts:
How to find whether "DL 380 Memory Upgrade" is in Webview/Native?
If it is an element in the webview, how to locate it? I located "CLOCK IN" as below:
#AndroidFindBy(xpath = "//android.view.View[#resource-id='tab-t0-0']")
private AndroidElement clockInTabBtn;
If its an element in WebView, then its web and you won't find anything in web while searching by resource-id - its native attribute only.
I would recommend to use chrome dev tools for debugging hybrid application.
You can read official docs for setup.
Basically you need:
connect device
go to chrome://inspect/#devices in chrome browser
check phone & allow usb debugging if popup appears
check what webViews chrome spotted and click inspect for the one you need
And now you search for elements and their locators the same way you did in Selenum/Web automation
Don't forget to switch context to WebView in your appium test before you actually searching inside webView.
Good luck!
You can check available view using context and can switch to it using follows code:
Set<string> contextNames = driver.getContextHandles();
for (String contextName : contextNames)
{
System.out.println(contextNames);
//To swicth to webview
if (contextName.contains("WEBVIEW")){
driver.context(contextName);
}
}
Please refer this thread for similar issue: https://github.com/appium/appium/issues/7243

Can i get screenshot of desktop using vuejs

i am working on tracking app using vue.js. I am a new developer.i wanna know is it possible to track mouse click and capture screenshots even if person is on desktop or any where else on browser
This has nothing to do with VueJs specifically. However, you can use HTML5/Canvas/Javascript to take a screenshot, but that's still experimental.
Take a look at this answer: Using HTML5/Canvas/JavaScript to take in-browser screenshots
i have found the solution
i followed the steps here
https://www.webrtc-experiment.com/getScreenId/
these steps allowed me the screen sharing on my webpage and then i use html to canvas to get the image of the video tag

Is there a way to force WebView link clicks to open externally?

I've got a WebView component that's loading static HTML content:
<WebView
style={{flex: 1}}
html={content}
/>
The issue is, if someone taps a link, it opens in the app and I'd rather force it to use Linking to open in Safari. Is that possible?
After searching around a bit the only way I see to open a browser from an RN app is using the Linking or LinkingIOS API. The question then is, how to enable your Webview to use that API. Here are two possible solutions:
1) Register your own URL Scheme that is handled by your app. E.g. myApp://this/is/a/link.html. Then handle all incoming events for that scheme and make corresponding calls to the API. Registering a scheme is easy and works very well. That seems like the most robust method to me.
2) Use a library that lets the Webview directly talk to it's paren view. E.g. https://github.com/alinz/react-native-webview-bridge.
Then you put a little JS code in your page that onClick sends the link URLs to the parent view, that then calls the API. I have used that project a while ago and it work like a charm until one RN upgrade that I needed broke it. But it's still under active development so you should be fine.

Titanium, Can you print a WebView webpage

In Titanium, is it possible to print a webpage, similar to printing a webpage from Safari? I'm using WebView.
It only needs to work with iOS, not Android.
If so, how? I haven't been able to find anything about this. One person told me it was impossible, but I thought I'd ask Stackoverflow - people here often surprise me :)
If you use the toImage() function on the WebView it takes a print to the visible area:
$.webview.toImage();
You want all the html content right?
If not, an possible workaround (I've didn't try this), but in order to do this, you need to know the html document height.
Create another WebView on an lower zIndex of your content app or place it out of the visible area like:
$.webview2.left = Ti.Platform.displayCaps.platformWidth;
Take a print of that copied WebView with:
$.webview2.toImage();
Than remove that view, obviously this wont work for all situations.