angularjs e2e 굴절기 테스트에서 파일을 업로드하는 방법

angularjs e2e 굴절기 테스트에서 파일을 업로드하는 방법

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();
});

1. 를 사용합니다.pathmodule을 사용하여 업로드할 파일의 전체 경로를 해결합니다.
2. 입력 type="file" 요소의 경로를 설정합니다.
3. 업로드 버튼을 클릭합니다.

파이어폭스에서는 동작하지 않습니다.요소가 보이지 않기 때문에 프로젝터가 불만을 제기합니다.파이어폭스에 업로드하려면 입력을 표시해야 합니다.제가 하는 일은 이렇습니다.

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();

직접 할 수 없어요.

보안상의 이유로 ngScenario와 같은 기능 테스트 스위트 내의 시스템에서 파일을 선택하고 있는 사용자를 시뮬레이트할 수 없습니다.

Protractor에서는 WebDriver를 기반으로 하기 때문에 이 트릭을 사용할 수 있습니다.

Q: WebDriver는 파일 업로드를 지원합니까?A: 네.

네이티브 OS 파일브라우저 대화상자와 직접 대화할 수는 없지만 파일 업로드 요소로 WebElement#sendKeys("/path/to/file")를 호출하면 올바르게 동작하도록 몇 가지 마법을 실행합니다.파일 업로드 요소를 WebElement #click()하지 않도록 하십시오.그렇지 않으면 브라우저가 중단될 수 있습니다.

이 기능은 정상적으로 동작합니다.

$('input[type="file"]').sendKeys("/file/path")

여기 Andres D와 davidb583의 조언이 있습니다.이 조언은 제가 이 일을 하면서 도움이 될 것입니다.

플로우제컨트롤에 대해서 견인기 테스트를 하려고 했는데

    // 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);

var imagePath = 'http://placehold.it/120x120&text=image1';
element(by.id('fileUpload')).sendKeys(imagePath);

이건 나한테 효과가 있어.

파이어폭스에 파일을 업로드하려면 다음과 같이 합니다.이 스크립트는 요소를 표시하여 경로 값을 설정합니다.

   browser.executeScript("$('input[type=\"file\"]').parent().css('visibility', 'visible').css('height', 1).css('width', 1).css('overflow', 'visible')");

위의 솔루션이 작동하지 않는 경우 이 문서를 참조하십시오.

먼저 파일을 업로드하려면input파일에 대한 경로를 지정하는 요소.보통 '업로드' 버튼 바로 옆에 있습니다.하지만 버튼 주위에 입력이 되어 있지 않아 혼란스러워 보이는 것을 본 적이 있습니다.조개를 잡아라, 입력은 페이지에 있어야 한다!'업로드' 또는 '파일'과 같은 것이 있는 입력 요소를 DOM에서 찾아보십시오. 이 요소는 어디에나 있을 수 있습니다.

파일을 찾았으면 해당 선택기를 가져와 파일의 경로를 입력합니다.루트 디렉토리에서 시작하는 절대 경로여야 합니다(/something/like/this 및 MAC C:/some/fileWindows 의 windows)

await $('input[type="file"]').sendKeys("/file/path")

...라면 이것은 효과가 없을지도 모른다.

sendKeys keyskeys는 。경우 입력이 숨겨집니다.0이것도 고칠 수

let $input = $('input[type="file"]');
await browser.executeScript(
    "arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1",
    $input.getWebElement()
);

테스트하고 있는 웹 앱의 파일 입력은 JavaScript를 사용하여 뷰로 스크롤 할 때만 파이어폭스에서 볼 수 있다는 것을 알고 Andres D의 코드에 scrollIntoView()를 추가하여 앱에서 사용할 수 있도록 했습니다.

  browser.executeAsyncScript(function (callback) {
        document.querySelectorAll('input')[2]
     .style = '';
        document.querySelectorAll('input')[2].scrollIntoView();

        callback();
    });

(파일 입력 요소의 스타일도 모두 삭제했습니다.)

// C:\ Directory에서 파일을 업로드하려면

{

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();

};

아래의 팝업을 열지 않고 파일을 선택하는 경우는, 다음과 같습니다.

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를 로드하는 경우에만 작동합니다. i 모든 다른 상황에서 사용자는 다음과 같은 오류가 발생합니다.실패: $가 정의되지 않았습니다.

네이티브 angularjs 코드를 사용하여 솔루션을 문서화할 것을 제안합니다.

예: 다음 사항을 제안하는 대신 제안합니다.

    $('input[type="file"]') .....

제안:

    angular.element(document.querySelector('input[type="file"]')) .....

후자는 더 표준적이며, 모서리 위에 있고, 더 중요한 것은 jquery를 필요로 하지 않는다.

언급URL : https://stackoverflow.com/questions/21305298/how-to-upload-file-in-angularjs-e2e-protractor-testing