angularjs e2e 테스트를 사용하여 파일 업로드를 테스트하고 싶습니다. e2e 테스트에서 어떻게 수행합니까? 나는 지저분한 카르마를 통해 테스트 스크립트를 실행합니다.
답변:
이것이 내가하는 방법입니다.
var path = require('path');
it('should upload a file', function() {
var fileToUpload = '../some/path/foo.txt',
absolutePath = path.resolve(__dirname, fileToUpload);
element(by.css('input[type="file"]')).sendKeys(absolutePath);
element(by.id('uploadButton')).click();
});
path모듈을 사용하여 업로드 할 파일의 전체 경로를 확인하십시오.이것은 firefox에서 작동하지 않습니다. 각도기는 요소가 보이지 않기 때문에 불평합니다. firefox에서 업로드하려면 입력을 표시해야합니다. 이것이 제가하는 것입니다:
browser.executeAsyncScript(function(callback) {
// You can use any other selector
document.querySelectorAll('#input-file-element')[0]
.style.display = 'inline';
callback();
});
// Now you can upload.
$('input[type="file"]').sendKeys(absolutePath);
$('#uploadButton').click();
__dirname때때로 임시 디렉터리 (테스트 실행자가 테스트를 복사하는 위치)를 가리 킵니다. process.cwd()이 __dirname경우 대신 사용할 수 있습니다 .
직접 할 수는 없습니다.
보안상의 이유로 ngScenario와 같은 기능 테스트 스위트 내에서 시스템에서 파일을 선택하는 사용자를 시뮬레이션 할 수 없습니다.
Protractor를 사용하면 WebDriver를 기반으로하기 때문에이 트릭 을 사용할 수 있습니다.
Q : WebDriver는 파일 업로드를 지원합니까? A : 네.
기본 OS 파일 브라우저 대화 상자와 직접 상호 작용할 수는 없지만 파일 업로드 요소에서 WebElement # sendKeys ( "/ path / to / file")를 호출하면 올바른 작업을 수행하도록 몇 가지 마법을 사용합니다. 파일 업로드 요소를 WebElement # click ()하지 않도록하십시오. 그렇지 않으면 브라우저가 중단 될 수 있습니다.
이것은 잘 작동합니다.
$('input[type="file"]').sendKeys("/file/path")
여기에 제가이 문제를 해결하는 데 도움이되었을 Andres D와 davidb583의 조언이 있습니다.
나는 flowjs 컨트롤에 대해 각도기 테스트를 실행하려고했습니다.
// requires an absolute path
var fileToUpload = './testPackages/' + packageName + '/' + fileName;
var absolutePath = path.resolve(__dirname, fileToUpload);
// Find the file input element
var fileElem = element(by.css('input[type="file"]'));
// Need to unhide flowjs's secret file uploader
browser.executeScript(
"arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1",
fileElem.getWebElement());
// Sending the keystrokes will ultimately submit the request. No need to simulate the click
fileElem.sendKeys(absolutePath);
// Not sure how to wait for the upload and response to return first
// I need this since I have a test that looks at the results after upload
// ... there is probably a better way to do this, but I punted
browser.sleep(1000);
테스트중인 웹 앱의 파일 입력은 JavaScript를 사용하여보기로 스크롤 할 때만 Firefox에서 볼 수 있다는 것을 깨달았으므로 Andres D의 코드에 scrollIntoView ()를 추가하여 앱에서 작동하도록했습니다.
browser.executeAsyncScript(function (callback) {
document.querySelectorAll('input')[2]
.style = '';
document.querySelectorAll('input')[2].scrollIntoView();
callback();
});
(파일 입력 요소의 모든 스타일도 제거했습니다)
// C : \ 디렉토리에서 파일을 업로드하려면
{
var path = require('path');
var dirname = 'C:/';
var fileToUpload = '../filename.txt';
var absolutePath = path.resolve('C:\filename.txt');
var fileElem = ptor.element.all(protractor.By.css('input[type="file"]'));
fileElem.sendKeys(absolutePath);
cb();
};
fileToUpload는 무엇입니까?
아래 팝업을 열지 않고 파일을 선택하려면 답이 있습니다.
var path = require('path');
var remote = require('../../node_modules/selenium-webdriver/remote');
browser.setFileDetector(new remote.FileDetector());
var fileToUpload = './resume.docx';
var absolutePath = path.resolve(process.cwd() + fileToUpload);
element(by.css('input[type="file"]')).sendKeys(absolutePath);
현재 문서화 된 솔루션은 사용자가 jQuery를로드하는 경우에만 작동합니다. 나는 모든 다른 상황에서 사용자에게 다음과 같은 오류가 표시됩니다. 실패 : $가 정의되지 않았습니다.
네이티브 angularjs 코드를 사용하여 솔루션을 문서화하는 것이 좋습니다.
예를 들어 다음을 제안하는 대신 제안합니다.
$('input[type="file"]') .....
제안 :
angular.element(document.querySelector('input[type="file"]')) .....
후자는 더 표준적이고 각도 위에 있으며 jquery가 필요하지 않은 것이 더 중요합니다.