[angularjs] angularjs e2e 각도기 테스트에서 파일을 업로드하는 방법

Program / 글쓴이

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. path모듈을 사용하여 업로드 할 파일의 전체 경로를 확인하십시오.
  2. input type = “file” 요소에 대한 경로를 설정합니다 .
  3. 업로드 버튼을 클릭하십시오.

이것은 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();

답변

직접 할 수는 없습니다.

보안상의 이유로 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);

답변

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')");

답변

테스트중인 웹 앱의 파일 입력은 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();

};